結合jQuery代碼的多個實例

Question

我目前使用下面的切換多個div的，但我想知道如果我可以將所有這些合併成一個？

<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> 

你可以把所有的功能在一個單一的document.ready功能。像上面：）...你也不必爲每個功能都有新的<script>標籤。

Answer 2

類添加到所有的div，如：

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

那麼你可以做：

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

如果你不想（或不能）一類添加到所有可切換項目，還可以在選擇器中組合多個id參考：

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

Answer 3

您可以使用數據屬性指定要將哪個元素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); 
}); 

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>​