jQuery - if element has particular CSS attribute, execute script

Question

I have a menu that contains a bunch of toggles. Each item toggles something different.

I am trying to make an overall "reset" button that resets several things back to some default settings. I need to detect if a menu item is toggled or not, and if so, execute some code on that particular item and if not, do nothing. With an item is toggled on, it gets a CSS background color, demonstrated below, so I came up with the following reset code:

$('#app-menu ul.dynamic-items li ul li').toggle(function () {
    $(this).css({background: "#4c581e"});
}, function () {
    $(this).css({background: "none"});
});

/* Reset Button */

$(".reset").click(function() {
    if( $('#app-menu ul.dynamic-items li').css({background: "#4c581e"}) != null )  { 
        $(this).click(); /* If the item has the background code mentioned above, it is toggled on, therefore this "click" should reset its state */
    } 
    else { 
    // do nothing //
    };
});

Basically I am trying to say that, if a menu item has the #4c581e background, that means its toggled on, and therefore it should be "clicked" to toggle it off again.

Problem is, its not working. I am fairly new-ish to jQuery so I figured I am doing something wrong.

Any ideas folks?

EDIT: I just want to note that the menu items actually toggle DIV elements on the page, so its not just a matter of resetting the menu item's css style. This is why I tried to make it "click" the item if the particular CSS property is detected, because "clicking" it will basically toggle it off again.

silasjmatson · Accepted Answer · 2012-12-06 02:37:08Z

2

1.

$(this).css("background-color") will return the value, but it will probably be a rgb value.

=> rgb(255, 255, 255)

So either compare the rgb values or use some conversion tool.

http://www.jquery4u.com/jquery-functions/jquery-convert-rgb-hex-color/

2.

You may just want to use css classes, and toggle the class. The 'reset' button could then just reapply all of the default classes to the elements, which is IMO much cleaner.

$('#app-menu ul.dynamic-items li ul li').toggle(function () {
    $(this).toggleClass("active");
});
$(".reset").click(function() {
    $('#app-menu ul.dynamic-items li ul li').removeClass("active");
});

And the css could be:

li.active {
  background-color: #4c581e;
  display: block;
}

edited Dec 6, 2012 at 2:37

answered Dec 6, 2012 at 2:22

silasjmatson

1,81418 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zach Nicodemous Over a year ago

its not just a matter of reapplying the default classes though. the menu items toggle div elements on the page, so the reset button hides the elements, and should also reset the menu items background color back to none, AND reset the toggle state. This is why I wanted to have a "click" executed on the menu item. Clicking the item should reset the background color AND toggle the relevant div elements off.

silasjmatson Over a year ago

Ah, you could check whether or not the elements have the class of "active" before triggering the click event $(this).hasClass("active");, which is easier than checking a background color.

Collectives™ on Stack Overflow

jQuery - if element has particular CSS attribute, execute script

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related