как правильно писать этот код в 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"); 
}); 

Это зависит от того, что ваш элемент идентификаторами точно так же, как и соответствующие классы на элементах они связаны.

Если бы вы могли добавить общий класс, скажем class="menu" в #wedding, #homecoming и т. Д., То вы можете упростить начальный селектор до $(".menu").

P.S. Если вы используете jQuery v1.8 или новее, используйте .addBack() вместо .andSelf().