Is it possible to change the button class within a div while ensuring only the last one retains the change?

Question

Is it possible to change the button class within a div while ensuring only the last one retains the change?

Here is a code snippet I'm using to switch between classes for buttons:

$('button').on('click', function(){
    var btn=$(this);
    if(btn.attr('class')=='tct-button'){
        btn.removeClass('tct-button').addClass('tct-button2');
    }
    else{
        btn.removeClass('tct-button2').addClass('tct-button');
    }

});

I need help with modifying this code so that when I click on a button in a div, any other buttons within the same div that were changed previously revert back to the default class 'tct-button'. Only the most recently clicked button should have the 'tct-button2' class. Can you assist me with this modification?

javascript jquery html css

Answer 1

Answer №1

Utilize the toggleClass function in jQuery instead of using hasClass()

$(this).toggleClass("custom-button1 custom-button2");

See Example

Answer 2

Utilize the toggleClass function in jQuery instead of using hasClass()

$(this).toggleClass("custom-button1 custom-button2");

See Example

Answer 3

Answer №2

Check if any of the selected elements have a specific class using hasClass()

Determine whether any of the matched elements have been assigned the specified class.

Example Code

$('button').on('click', function(){
    var btn = $(this);
    if(btn.hasClass('tct-button')){
        btn.removeClass('tct-button').addClass('tct-button2');
    }
    else{
        btn.removeClass('tct-button2').addClass('tct-button');
    }       
});

Another approach could be

$('button').on('click', function(){
    $('.tct-button2').removeClass('tct-button2'); //Remove all instances of this class 
    $(this).addClass('tct-button2'); //Add the class to the current element
});

Answer 4

Check if any of the selected elements have a specific class using hasClass()

Determine whether any of the matched elements have been assigned the specified class.

Example Code

$('button').on('click', function(){
    var btn = $(this);
    if(btn.hasClass('tct-button')){
        btn.removeClass('tct-button').addClass('tct-button2');
    }
    else{
        btn.removeClass('tct-button2').addClass('tct-button');
    }       
});

Another approach could be

$('button').on('click', function(){
    $('.tct-button2').removeClass('tct-button2'); //Remove all instances of this class 
    $(this).addClass('tct-button2'); //Add the class to the current element
});

Answer 5

Answer №3

To enhance your buttons with an extra class (tct-button2) while maintaining the original tct-button class on all buttons, you can follow Satpal's suggestion.

However, if you're looking to update the classes so that each button only has one class at a time (either tct-button or tct-button2), you can adopt a similar approach as suggested by Satpal:

$('button').on('click', function(){
    $('.tct-button2').addClass('tct-button').removeClass('tct-button2'); //Add original class and Remove tct-button2 class
    $(this).removeClass('tct-button').addClass('tct-button2'); //Apply class to current element
});

Here is an example http://jsfiddle.net/lee_gladding/xao46uzs/

If you want to target only the buttons within the same div as the clicked button, you can use a method like this:

$('button').on('click', function(){
    $(this).parent('div').find('.tct-button2').addClass('tct-button').removeClass('tct-button2'); //Remove all classes in that div
    $(this).removeClass('tct-button').addClass('tct-button2'); //Apply the class to current element
});

(Consider using a more precise selector for the parent element, such as a class or whatever structure your HTML follows)

Example:

http://jsfiddle.net/lee_gladding/xao46uzs/3/

Answer 6

To enhance your buttons with an extra class (tct-button2) while maintaining the original tct-button class on all buttons, you can follow Satpal's suggestion.

However, if you're looking to update the classes so that each button only has one class at a time (either tct-button or tct-button2), you can adopt a similar approach as suggested by Satpal:

$('button').on('click', function(){
    $('.tct-button2').addClass('tct-button').removeClass('tct-button2'); //Add original class and Remove tct-button2 class
    $(this).removeClass('tct-button').addClass('tct-button2'); //Apply class to current element
});

Here is an example http://jsfiddle.net/lee_gladding/xao46uzs/

If you want to target only the buttons within the same div as the clicked button, you can use a method like this:

$('button').on('click', function(){
    $(this).parent('div').find('.tct-button2').addClass('tct-button').removeClass('tct-button2'); //Remove all classes in that div
    $(this).removeClass('tct-button').addClass('tct-button2'); //Apply the class to current element
});

(Consider using a more precise selector for the parent element, such as a class or whatever structure your HTML follows)

Example:

http://jsfiddle.net/lee_gladding/xao46uzs/3/

Is it possible to change the button class within a div while ensuring only the last one retains the change?

Answer №1

See Example

Answer №2

Answer №3

Similar questions

The v-show directive is not activated by a Vuex commit

The @media print rule for Angular 16 in the style.css file is not functioning properly

Unlock the Power of TWBS Ratchet: Manually Closing Modal Windows

Customizing the appearance of Indicators and Paginator in PrimeNG Carousel

Tips for resolving the error "React import attempt":

When attempting to call a Firebase Cloud Function URL in an AngularJS $http request, an Access Control Origin Error

React: Submit button not triggering form submission despite having a valid submit event handler and correct syntax

Is it possible for Websockets to receive data from Ajax requests?

How can I retrieve routing parameters in a Vue.js/Nuxt/TypeScript app?

How to Incorporate LessCSS into the Blueprint Framework?

Can you provide me the steps to delete the title attribute from images in Wordpress?

Using jQuery to display a div after a 2-second delay on my website, ensuring it only appears once and does not reappear when the page is refreshed or when navigating to a

Ensuring the selected date matches any consecutive dates within the dates array in Angular

Enhancing the content of a field - React

I possess information stored within the array object below, and I aim to transform it into a different array object format

Managing data flow in React and Reflux: Utilizing a single component duplicated in the DOM

Chrome method for creating Flexbox columns of equal height

Challenge with CSS3 Selectors

When clicking in JavaScript, there are two parts to the function, however only one part will work at any given time

Conceal the initial modal beneath the overlay when the second modal is activated