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

   $("#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动画编写了此代码。有四个项目，当我单击一个项目时，一个项目就是动画，其他项目将返回。我需要知道如何简化此代码。

最佳答案

在不更改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")。

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