javascript - 如何在 javascript 中以正确的方式编写此代码

Question

   $("#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"); 

    });  

我为动画 css 动画编写了这段代码。有四个元素，当我单击一个元素时，一个元素是动画的，其他元素将返回。我需要知道如何简化这段代码。

Answer 1

在不更改 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 与它们关联的元素的相应类完全相同这一事实。

如果你可以添加一个公共(public)类，比如 class="menu" 到 #wedding、#homecoming 等元素，那么你可以将初始选择器简化为$(".menu").

附言如果您使用的是 jQuery v1.8 或更高版本，请使用 .addBack()而不是 .andSelf() .