改变动态按钮的CSS - Change CSS of Dynamic buttons

Change CSS of Dynamic buttons

本文关键字：CSS 按钮动态改变 | 更新日期: 2023-09-27

我有以下内容，并且能够执行警报。如何更改所选按钮的类别?

$('body').on("click", "button[name=likebtn]", function (){
    alert($(this).attr("value"));
    $(this).toggleClass('btn btn-mini likebtn');
// OR
    $(this).addClass('btn btn-mini likebtn').removeClass('btn btn-mini btn-primary likebtn');
});

按钮动态输出:

$('#div').append("<button class='btn btn-mini btn-primary likebtn' name='likebtn' type='button' value='"+obj.value+"'>"+"LIKE"+"</button>");

也许你应该在addClass()之前使用removeClass()

$(this).removeClass('btn-primary').addClass('btn btn-mini likebtn');

因为你用.addClass('btn btn-mini likebtn')加入btn btn-mini likebtn然后通过调用.removeClass('btn btn-mini btn-primary likebtn');来移除它们

EDIT:如果您只想删除btn-primary类:

$('button[name=likebtn]').on("click", function (){
// ...
 $(this).removeClass('btn-primary');
});

希望您已经为按钮添加了class 'btn-primary'。你只需要添加类btn btn-mini likebtn并删除类btn-primary。那就试试下面这个。

$(this).addClass('btn btn-mini likebtn').removeClass('btn-primary');

如果你在body中添加按钮，你必须再次运行下面的代码

$('body').on("click", "button[name=likebtn]", function (){
    alert($(this).attr("value"));
    $(this).toggleClass('btn-primary');
});