2

我目前正在使用以下来切换多个 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>
4

3 回答 3

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>为每个功能都有新的标签。

于 2012-07-22T11:00:52.687 回答
1

为所有 div 添加一个类，例如：

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

那么你可以这样做：

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

如果您不想（或不能）为所有可切换项目添加一个类，您还可以在选择器中组合多个 id-references：

$('#tvehicle1, #tvehicle2, #tv3').click(function () {
    $(this).toggle();
});
于 2012-07-22T11:08:46.450 回答
0

您可以使用数据属性来指定要切换的元素。 例子

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

​</p>

于 2012-07-22T11:30:48.100 回答