CODEWITHSUNDEEP
jquery
Guif If
Guif If

Reputation: 595

Change bootstrap button class

I would like to change the text and colour of buttons when execute onclick event. The text is changed correctly but with the color have some problems.

With this line put some dynamically buttons:

$register_status = '<button class="btn btn-success btn_status btn-block" data-status="Active">Active</button>';

$register_status = '<button class="btn btn-warning btn_status btn-block" data-status="Inactive">Inactive</button>';

and with this jquery can change the text but the last line can't run correctly.

$('body').click('.btn_status', function(e){
var button = jQuery(e.target);
if(button.data('status') == 'Active'){
          button.data('status', 'Inactive');
          button.html('Inactive');
          $(".btn_status").removeClass("btn-warning").addClass("btn-success");
        }else if(button.data('status') == 'Inactive'){
...

what's wrong? thanks.

Upvotes: 2

Views: 1222

Answers (2)

isherwood
isherwood

Reputation: 61055

For some reason you're targeting the clicked element with everything but your class toggler (where you're targeting all elements with the class btn_status). Use it there also and it all works fine.

var button = jQuery(e.target);

if (button.data('status') == 'Active') {
    button.data('status', 'Inactive');
    button.html('Inactive');
    button.toggleClass("btn-warning btn-success");
} else {
    button.data('status', 'Active');
    button.html('Active');
    button.toggleClass("btn-warning btn-success");
}

Demo

Demo with chaining

Upvotes: 0

Babak Naffas
Babak Naffas

Reputation: 12561

Your HTML snippet has your class as btn_status but your selector is looking for btnstatus. Notice the missing underscore in your selector.

Also, don't use a new selector if you already have a variable for the button (button) as you may be selecting a different element.

Change $(".btn_status").removeClass("btn-warning").addClass("btn-success"); to button.removeClass("btn-warning").addClass("btn-success"); just like you're using for the call to .html(..)

Upvotes: 1

Related Questions