Multiple show hide div

J'ai essayé de le faire toute la journée. À la fin, j'ai réussi à le faire fonctionner. Je sais que ce n'est pas la meilleure façon de faire.Multiple show hide div

Quelqu'un peut-il me montrer s'il vous plaît un meilleur moyen. J'ai besoin de 12 au total. Il n'a pas besoin d'être case à cocher non plus. Ce peut être juste un texte. J'ai eu l'idée de com/2006/12/14/utilisant-jquery-à-show-hide-form-éléments à base sur une case de sélection/

J'ai réussi à le télécharger sur http://utilitybase.com/paste/wmq

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 

     //Hide div w/id extra 
     $("#extra").css("display","none"); 

     // Add onclick handler to checkbox w/id checkme 
     $("#checkme").click(function(){ 

     // If checked 
     if ($("#checkme").is(":checked")) 
     { 
      //show the hidden div 
      $("#extra").show("fast"); 
     } 
     else 
     {  
      //otherwise, hide it 
      $("#extra").hide("fast"); 
     } 
     }); 

    }); 
</script> 

<script type="text/javascript"> 
    $(document).ready(function(){ 

     //Hide div w/id extra 
     $("#extra1").css("display","none"); 

     // Add onclick handler to checkbox w/id checkme 
     $("#checkme1").click(function(){ 

     // If checked 
     if ($("#checkme1").is(":checked")) 
     { 
      //show the hidden div 
      $("#extra1").show("fast"); 
     } 
     else 
     {  
      //otherwise, hide it 
      $("#extra1").hide("fast"); 
     } 
     }); 

    }); 
</script> 

<script type="text/javascript"> 
    $(document).ready(function(){ 

     //Hide div w/id extra 
     $("#extra2").css("display","none"); 

     // Add onclick handler to checkbox w/id checkme 
     $("#checkme2").click(function(){ 

     // If checked 
     if ($("#checkme2").is(":checked")) 
     { 
      //show the hidden div 
      $("#extra2").show("fast"); 
     } 
     else 
     {  
      //otherwise, hide it 
      $("#extra2").hide("fast"); 
     } 
     }); 

    }); 
</script> 

<script type="text/javascript"> 
    $(document).ready(function(){ 

     //Hide div w/id extra 
     $("#extra3").css("display","none"); 

     // Add onclick handler to checkbox w/id checkme 
     $("#checkme3").click(function(){ 

     // If checked 
     if ($("#checkme3").is(":checked")) 
     { 
      //show the hidden div 
      $("#extra3").show("fast"); 
     } 
     else 
     {  
      //otherwise, hide it 
      $("#extra3").hide("fast"); 
     } 
     }); 

    }); 
</script> 

<script type="text/javascript"> 
    $(document).ready(function(){ 

     //Hide div w/id extra 
     $("#extra4").css("display","none"); 

     // Add onclick handler to checkbox w/id checkme 
     $("#checkme4").click(function(){ 

     // If checked 
     if ($("#checkme4").is(":checked")) 
     { 
      //show the hidden div 
      $("#extra4").show("fast"); 
     } 
     else 
     {  
      //otherwise, hide it 
      $("#extra4").hide("fast"); 
     } 
     }); 

    }); 
</script> 
</head> 

<body> 

<div style="width: 800px;"> 
     <form> 

      <input type="text" name="" maxlength="30" /> 
      <label for="checkbox"> Check to enter another email address:</label> 
      <input id="checkme" type="checkbox" /> 

      <div id="extra"> 
      <input type="text" name="input" maxlength="30" /> 
      <label for="checkbox"> Check to enter another email address:</label> 
      <input id="checkme1" type="checkbox" /> 

      <div id="extra1"> 
      <input type="text" name="" maxlength="30" /> 
      <label for="checkbox"> Check to enter another email address:</label> 
      <input id="checkme2" type="checkbox" /> 

      <div id="extra2"> 
      <input type="text" name="" maxlength="30" /> 
      <label for="checkbox"> Check to enter another email address:</label> 
      <input id="checkme3" type="checkbox" /> 

      <div id="extra3"> 
      <input type="text" name="" maxlength="30" /> 
      <label for="checkbox"> Check to enter another email address:</label> 
      <input id="checkme4" type="checkbox" /> 

      <div id="extra4"> 
      <input type="text" name="" maxlength="30" /> 
      </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </form> 
</div> 
</body> 
</html>

Source

2010-10-29 emre

votre mise en forme évoque le cancer des yeux ... essayez http://stackoverflow.com/editing-help – pex

Je sais ... Il est en http://utilitybase.com/paste/wmq maintenant – emre

Si je vous ai droit, vous pourriez jouer avec

<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     var prototype = $('.prototype').clone(); 

     $('.prototype > input[type="checkbox"]').live('click', function() { 
     if($(this).is(':checked')) { 
      var clone = prototype.clone(); 
      clone.find('input[type="checkbox"]').attr('checked', false); 
      $(this).parent('.prototype').append(clone); 
     } else { 
      $(this).parent('.prototype').find('.prototype:last').remove(); 
     } 
     }); 
    }); 
    </script> 
</head> 

<body> 
    <form> 
    <div class="prototype"> 
     <input type="text" name="" maxlength="30" /> 
     <label for="checkbox"> Check to enter another email address:</label> 
     <input id="checkme" type="checkbox" /> 
    </div> 
    </form> 
</body> 
</html>

EDIT: Ce module est une nouvelle entrée/label/case prototype dans le courant un ou enlève des enfants d'autre part. Vous pouvez également ajouter des identifiants aux champs.

Source

2010-10-29 21:56:58 pex

cela fonctionne presque parfait. Si vous cliquez sur 4-5 fois et que vous essayez de le décocher et de le cliquer à nouveau, il ne se ferme pas 1 par un. il ferme 3-4 d'entre eux et si vous cliquez sur le haut, il ouvre 1 à la fin. – emre

je vais y jeter un coup d'oeil – pex

des thats agréable.

Avez-vous essayé .each ou .live

http://api.jquery.com/each/

http://api.jquery.com/live/

Source

2010-10-29 21:05:57 zod

je suis en train de coller le code ici mais cela ne fonctionne pas – emre

code de pâte ... sélectionnez et utilisez 1010 dans cet éditeur – zod

je suis nouveau ici .... – emre

Hmm. En regardant votre code sur UtilityBase. Peut-être essayer d'utiliser la fonction jquery .siblings(). Ensuite, pour le clic de la case que vous pouvez faire une $(this).siblings('div').hide()/show();

Source

2010-10-29 21:38:34

Cela fonctionne habituellement pour moi

$("div[id^='extra']").click(function(){ 
    $div = $(this); 
    divID = $div.attr("id").substring(5); 

//Hide div w/id extra 
     $div.css("display","none"); 

     // Add onclick handler to checkbox w/id checkme 
     $("#checkme"+divID).click(function(){ 

     // If checked 
     if ($("#checkme"+divID).is(":checked")) 
     { 
      //show the hidden div 
      $div.show("fast"); 
     } 
     else 
     {  
      //otherwise, hide it 
      $div.hide("fast"); 
     } 

});

Cela devrait vous empêcher d'avoir à écrire la même chose plusieurs timesdiv

Source

2010-10-29 21:51:12 Adam

je ne pouvais pas obtenir ce travail. – emre

Vous pouvez essayer quelque chose comme ceci:

// isolate the first div. You can surely find a better way, 
// using classes, containers, etc., but this works for now. 
// Hide all the others. 
$('div:has(input):not(:first)').hide(); 

// For each checkbox, open the next div 
$('input:checkbox').click(function(){ 
    if($(this).is(':checked')) { 
    $(this).next('div').show('fast'); 
    } else { 
    $(this).next('div').hide('fast'); 
    } 
});

Source

2010-10-29 21:51:39

Multiple show hide div

Répondre

Questions connexes