如何编写这段代码正确的方式在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 animation.there的四个项目的代码，当我点击一个一个项目是动画和其他人将返回。我需要知道如何简化这段代码。

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是完全一样的，他们正在与相关联的元素对应的类。

如果你可以添加一个普通的类，比如class="menu"到#wedding, #homecoming等项目，那么你可以简化初始选择器到$(".menu")。

P.S.如果您使用jQuery v1.8或更高版本，请使用.addBack()而不是.andSelf()。