Question

我想在执行onclick事件时更改按钮的文本和颜色。文本正确更改，但颜色有问题。

在此行中放置一些动态按钮：

$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>';

并且使用此jquery可以更改文本，但最后一行不能正确运行。

$('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'){
...

怎么了？谢谢。

Answer 1

您的HTML代码段中的类为btn_status，但您的选择器正在寻找btnstatus。请注意选择器中缺少下划线。

此外，如果您已经为按钮（button）设置了变量，则不要使用新的选择器。

更改 $(".btn_status").removeClass("btn-warning").addClass("btn-success"); 至 button.removeClass("btn-warning").addClass("btn-success");就像您在呼叫.html(..)

Answer 2

由于某种原因，您将除类切换器之外的所有内容都作为clicked元素的目标（在您的类btn_status中将 all 元素作为目标）。在那里也可以使用它，一切都很好。

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

更改引导程序按钮类

2 个答案: