Combiner plusieurs instances de code jquery

Question

Je suis actuellement en utilisant le ci-dessous pour basculer plusieurs div mais je me demande si je peux combiner tous ceux-ci en un seul?

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#tvehicle").click(function() { 
     $("#div7").toggle(); 
    }); 
}); 
</script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#tvehicle2").click(function() { 
     $("#vehicle2").toggle(); 
    }); 
}); 
</script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#tproperty").click(function() { 
     $("#div8").toggle(); 
    }); 
}); 
</script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#thproperty1").click(function() { 
     $("#hproperty1").toggle(); 
    }); 
}); 
</script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#thproperty2").click(function() { 
     $("#hproperty2").toggle(); 
    }); 
}); 
</script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#thproperty3").click(function() { 
     $("#hproperty3").toggle(); 
    }); 
}); 
</script> 

Answer 1

<script type="text/javascript"> 
$(document).ready(function(){ 
$("#tvehicle").click(function(){ 
    $("#div7").toggle(); 
}); 

$("#tvehicle2").click(function(){ 
$("#vehicle2").toggle(); 
}); 

//AND SO ON... 

}); 
</script> 

Vous pouvez mettre toutes les fonctions en une seule fonction document.ready. Comme ci-dessus:) ... De même, vous ne devez pas avoir de nouvelles étiquettes <script> pour chaque fonction.

Answer 2

Ajouter une classe à tous les divs, par exemple:

<div id="tvehicle2" class="toggleable"> ... </div> 

vous pouvez alors faire:

$(".toggleable").click(function() { 
    $(this).toggle(); 
}); 

si vous ne voulez pas (ou ne peut pas) ajouter une classe à tous les articles toggleable, vous pouvez également combiner plusieurs id références dans un sélecteur:

$('#tvehicle1, #tvehicle2, #tv3').click(function() { 
    $(this).toggle(); 
}); 

Answer 3

vous pouvez utiliser les données des attributs pour spécifier l'élément à t oggle. example

$(document).ready(function(){ 
var toggler = function() { 
    var toToggle = $(this).data().toggleId; //Id of an element to toggle 

    $("#" + toToggle).toggle();   
}; 

$(".togglers").on("click", ".toggler", toggler); 
}); 

structure HTML

<div class="togglers"> 
<div class="toggler" data-toggle-id="to-toggle-1">Click to toggle 1</div> 

<div class="to-toggle" id="to-toggle-1">I will be toggled #1</div> 

<div class="toggler" data-toggle-id="to-toggle-2">Click to toggle 2</div> 

<div class="to-toggle" id="to-toggle-2">I will be toggled #2</div> 

<div class="toggler" data-toggle-id="to-toggle-3">Click to toggle 3</div> 

<div class="to-toggle" id="to-toggle-3">I will be toggled #3</div> 
</div>​