CODEWITHSUNDEEP
javascriptjqueryhtmlcss
lauWM
lauWM

Reputation: 749

JQuery toggle two classes at once

Here is the code: http://jsfiddle.net/celiostat/NCPv9/

the 2 Jquery plugin enables to change (and set): - background color of div to gray - text color to red.

Problem is I have to exactly point the mouse exactly ON the text so that text changes color too. I would like to change background Div color AND text by clicking -- anywhere -- in the div

Tried various combination from other post..but nothing worked.

(ideally I would also like to change picture at the same time !)

$(".item_unselected").on("click", function() {
$(this).toggleClass("gray_cliked_box");
$(".item_unselected").not(this).removeClass("gray_cliked_box");
});

$(".item_text_in_menubar").on("click", function() {
$(this).toggleClass("blue_cliked_text");
$(".item_text_in_menubar").not(this).removeClass("blue_cliked_text");

});

Upvotes: 0

Views: 329

Answers (2)

entropic
entropic

Reputation: 1683

You're fairly close, but the reason you have to click on the text is because you're only setting the class for the text once you click on it - you never set it from when you click on the div. Thankfully, you can optimize (and fix) your code by only having one event. If you click on a div, you simply set both items.

You can do this using the find method in jQuery to find the span that you want to modify when clicking on the div. The updated JS is as follows:

$(".item_unselected").on("click", function () {
    $(".item_unselected").removeClass("gray_cliked_box");
    $(".item_text_in_menubar").removeClass("blue_cliked_text");
    var $this = $(this);
    $this.addClass("gray_cliked_box");
    $this.find(".item_text_in_menubar").addClass("blue_cliked_text"); 
});

Updated Fiddle: http://jsfiddle.net/NCPv9/3/

What this actually does, is remove the class from all the objects, and then just simply add the classes back to the ones you want. You also don't have to use toggleClass. You know you're adding it so just use addClass.

Upvotes: 2

Patrick Gunderson
Patrick Gunderson

Reputation: 3281

This is a CSS problem, not a jquery problem. I updated your last CSS selector to:

.gray_cliked_box .item_text_in_menubar {  /*for jquery*/
    color: red;
}

and the text changes to red when clicked.

The added selector says that children of .gray_clicked_box with a class .item_text_in_menubar should be red. This supercedes other definitions of .item_text_in_menubar because it's a more specific selector.

http://jsfiddle.net/NCPv9/4/

Upvotes: 1

Related Questions