0 
   $("#wedding").click(function() {  
        $(".wedding, .wedding div").addClass("menuclick"); 
    $(".homecoming div, .ourstory div, .weddingcrew div").removeClass("menuclick"); 
    });  

$("#homecoming").click(function() {  
        $(".homecoming, .homecoming div").addClass("menuclick");
    $(".wedding div, .ourstory div, .weddingcrew div").removeClass("menuclick"); 

    });  

$("#ourstory").click(function() {  
        $(".ourstory, .ourstory div").addClass("menuclick");
        $(".wedding div, .homecoming div, .weddingcrew div").removeClass("menuclick"); 

    });  

$("#weddingcrew").click(function() {  
        $(".weddingcrew, .weddingcrew div").addClass("menuclick");
        $(".wedding div, .ourstory div, .homecoming div").removeClass("menuclick"); 

    });

animate css animation.there の 4 つのアイテムのこのコードを書きました。1 つのアイテムをクリックすると、アニメーションになり、他のアイテムが返されます。このコードを単純化する方法を知る必要があります。

4

1 に答える 1

5

HTMLを変更せずに、これを行うことができます：

$("#wedding, #homecoming, #ourstory, #weddingcrew").click(function() {
  // remove menuclick class from all elements that currently have it
  $(".menuclick").removeClass("menuclick");
  // now add menuclick just to elements associated with the clicked item
  $("." + this.id).find("div").andSelf().addClass("menuclick"); 
});

これは、要素 ID が、関連付けられている要素の対応するクラスとまったく同じであるという事実に依存します。

などのアイテムに共通のクラスを追加できれば、最初のセレクターを に単純化class="menu"できます。#wedding, #homecoming$(".menu")

PS jQuery v1.8 以降を使用している場合は、.addBack()代わりに.andSelf().

于 2013-08-07T02:39:55.203 に答える