CODEWITHSUNDEEP
javascriptcss
user2607456
user2607456

Reputation: 159

how to write this code in right way in 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"); 

    });

i wrote this code for animate css animation.there's four items, and when i click one one item is animate and others will return. i need to know how to simplify this code.

Upvotes: 0

Views: 83

Answers (1)

nnnnnn
nnnnnn

Reputation: 150070

Without changing your html, you could do this:

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

This depends on the fact that your element ids are exactly the same as the corresponding classes on the elements they're associated with.

If you could add a common class, say class="menu" to the #wedding, #homecoming, etc. items then you could simplify the initial selector to $(".menu").

P.S. If you're using jQuery v1.8 or later use .addBack() instead of .andSelf().

Upvotes: 5

Related Questions