Using JQuery to apply a CSS class or check for a CSS class on multiple button elements that

Question

Using JQuery to apply a CSS class or check for a CSS class on multiple button elements that

Being new to Jquery and Javascript, I am facing challenges in understanding how to implement the following.

Throughout my site, I use the same button class, and I am attempting to make Jquery apply a "clicked" class only to the button that was clicked, not to all others.

This is the code I currently have...

$(".button-img").click(function()  {
    var clickedButton = $(this);
    if (clickedButton.hasClass('clicked')) {
        return false;
    }
    clickedButton.addClass('clicked');
});

The functionality I am aiming for can be better understood in this fiddle - http://jsfiddle.net/biggee/FQqL8/1/

Despite my efforts, I still feel like I'm missing something crucial. Any assistance or guidance would be greatly appreciated.

jquery css button addclass

Answer 1

Answer №1

Let's address a couple of issues in your code:

You had a parse error that was easily fixed by adding parentheses here:
if clickedButton.hasClass('clicked') {

Your CSS also needs correction. Instead of targeting an element with class clicked inside .button-img, you should do this:

.button-img.clicked {
    background-position:0px -60px;
}

This will target the .button-img element with the clicked class.

To simplify your code further, you can use the following snippet:

$(".button-img").on('click', function() {
    $(this).addClass('clicked');
});

Answer 2

Let's address a couple of issues in your code:

You had a parse error that was easily fixed by adding parentheses here:
if clickedButton.hasClass('clicked') {

Your CSS also needs correction. Instead of targeting an element with class clicked inside .button-img, you should do this:

.button-img.clicked {
    background-position:0px -60px;
}

This will target the .button-img element with the clicked class.

To simplify your code further, you can use the following snippet:

$(".button-img").on('click', function() {
    $(this).addClass('clicked');
});

Answer 3

Answer №2

Check out this jsFiddle Demo

Make sure to always monitor the console for any errors that may occur.

An error occurred: Uncaught SyntaxError: Unexpected identifier

A missing parenthesis has been identified in the following code:

if clickedButton.hasClass('clicked') {

The correct syntax should be as follows:

if (clickedButton.hasClass('clicked')) {

Answer 4

Check out this jsFiddle Demo

Make sure to always monitor the console for any errors that may occur.

An error occurred: Uncaught SyntaxError: Unexpected identifier

A missing parenthesis has been identified in the following code:

if clickedButton.hasClass('clicked') {

The correct syntax should be as follows:

if (clickedButton.hasClass('clicked')) {

Answer 5

Answer №3

Oops!

I found the solution to my own problem.

I realized that I had set up the css class incorrectly when I was trying it before.

Previously...

.button-img .clicked {background-position:0px -60px;}

Now... (and it's working)

.clicked {background-position:0px -60px;}

Thanks everyone ;)

Answer 6

Oops!

I found the solution to my own problem.

I realized that I had set up the css class incorrectly when I was trying it before.

Previously...

.button-img .clicked {background-position:0px -60px;}

Now... (and it's working)

.clicked {background-position:0px -60px;}

Thanks everyone ;)

Using JQuery to apply a CSS class or check for a CSS class on multiple button elements that

Answer №1

Answer №2

Answer №3

Similar questions

Database experiencing issue with data insertion functionality

How to Create a Custom Callback Function for jQuery's .html

Suggestions for managing AngularJS within ASP.NET Web Forms?

Automatically fill in the Modal popup

Try using Bootstrap 4 Carousel columns instead of the traditional carousel-item

Tips for replacing the nested array object in JavaScript

Creating code that adheres to the ECMAScript 5 standards

Using Jquery to retrieve servlet session data

Validation message causing Bootstrap form inline to lose center alignment

CSS: selecting the adjacent siblings of a certain class, starting from the first and

Enhance your product listings in Opencart 2.0 by adding supplementary images alongside the main product image

When attempting to use a jQuery-formatted JSON object within an <optgroup > returned via AJAX from PHP and MySQL, it appears to be incompatible with Select2

Adjust the height of the dropdown list in react-select (React Material UI)

I'm having trouble getting Jquery's insertAfter() function to function properly

Enhancing Dropdown Functionality Using Jquery

The div element is not resizing properly when the phone is in landscape mode

IE9 does not consider JavaScript variable as undefined

Is it possible for the content of the HTML Select to vary from the options displayed in the 'drop-down' menu that the user chooses from?

Having trouble resolving this technical problem in Express.js and JavaScript programming

"Enjoy a full-screen background that adjusts its height while you scroll