How to toggle two classes simultaneously using JQuery

Question

How to toggle two classes simultaneously using JQuery

Check out this code snippet: http://jsfiddle.net/celiostat/NCPv9/

Utilizing the 2 jQuery plugin allows for the following changes to be made: - The background color of the div can be set to gray. - The text color can be changed to red.

The issue arises when trying to change the color of the text by precisely pointing the mouse on it. I am looking to change both the background color of the div and the text color by simply clicking anywhere within the div.

I have attempted different combinations from various posts, but none have been successful.

(In an ideal scenario, I would also like to change the picture simultaneously!)

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

});

javascript jquery html css

Answer 1

Answer №1

Although you are getting close, the reason you need to click on the text is because you are only applying the class to the text once it has been clicked, rather than when the div is clicked. Fortunately, you can streamline and correct your code by consolidating the event handling. When you click on the div, both items are set simultaneously.

You can achieve this by utilizing the find method in jQuery to locate the span that should be modified upon clicking the div. The revised JavaScript code 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/

Essentially, this code removes the class from all elements and then adds the classes back to the desired ones. Moreover, you can use addClass directly instead of toggleClass since you know you are adding the class.

Answer 2

Although you are getting close, the reason you need to click on the text is because you are only applying the class to the text once it has been clicked, rather than when the div is clicked. Fortunately, you can streamline and correct your code by consolidating the event handling. When you click on the div, both items are set simultaneously.

You can achieve this by utilizing the find method in jQuery to locate the span that should be modified upon clicking the div. The revised JavaScript code 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/

Essentially, this code removes the class from all elements and then adds the classes back to the desired ones. Moreover, you can use addClass directly instead of toggleClass since you know you are adding the class.

Answer 3

Answer №2

The issue at hand is related to CSS rather than jquery. I have made modifications to your CSS selector as follows:

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

As a result, the text will turn red when clicked.

The new selector specifies that any children of .gray_clicked_box with the class .item_text_in_menubar should have a color of red. This takes precedence over other styling rules for .item_text_in_menubar since it is a more specific selector.

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

Answer 4

The issue at hand is related to CSS rather than jquery. I have made modifications to your CSS selector as follows:

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

As a result, the text will turn red when clicked.

The new selector specifies that any children of .gray_clicked_box with the class .item_text_in_menubar should have a color of red. This takes precedence over other styling rules for .item_text_in_menubar since it is a more specific selector.

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

How to toggle two classes simultaneously using JQuery

Answer №1

Answer №2

Similar questions

Generic partial application fails type checking when passing a varargs function argument

What is the best way to incorporate random colors from a preselected color palette within my JavaScript code?

Implementing a splash screen upon selecting the second exit option

What should be placed in the viewRef: MapViewNativeComponentType parameter when utilizing React Native Maps in the current.fitToSuppliedMarkers function?

Utilizing HTML snippets for AJAX integration

Unable to add new tags in Vue multiselect component

The drawback of using a datepicker within an Angular input field

"Ensure that all necessary fonts and assets are included in the development of your Vue component

Starting with HTML5 can be a bit overwhelming, especially when it comes to compatibility with older systems

"Exploring the Functionality of Page Scrolling with

`Creating a functional list.js filter``

Dynamic binding of CSS properties in AngularJS is a powerful feature that enables

Creating JSX elements in React by mapping over an object's properties

Using the splice() method to remove an item from an array may cause unexpected results in React applications

Creating a dynamic dropdown menu using jQuery animation

What could be causing JSON.parse to encounter errors when parsing a string array?

CSS: The button appears to be slightly lower than the label

Notify the user with a Jqgrid alert when they attempt to select multiple checkboxes

When Components in Vue are called in a Single File, certain elements may not be displaying as expected

Steps to easily modify the color of Font Awesome stacked icons when hovering over them