2

私は現在、以下を使用して複数のdivを切り替えていますが、これらすべてを1つに組み合わせることができるかどうか疑問に思っていますか？

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

すべての関数を1つのdocument.ready関数に入れることができます。上記のように：）...また、すべての関数に新しい<script>タグを付ける必要はありません。

于 2012-07-22T11:00:52.687 に答える
1

すべての div にクラスを追加します。例:

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

次に、次のことができます。

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

トグル可能なすべてのアイテムにクラスを追加したくない (または追加できない) 場合は、セレクターで複数の ID 参照を組み合わせることもできます。

$('#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 に答える