如何用jQuery为已有类元素添加新类？Bootstrap按钮点击样式需求

首先我先把你没写完的HTML代码补全成合理的结构（毕竟原片段不完整），方便后续演示：

<div class="form-group">
  <label for="someLabel">Label</label><br>
  <input type="hidden" name="someName" value="0"/>
  <input id="someID" type="checkbox" name="sumName" value="1" class="hidden"/>
  <div is="0" class="btn-group" tabindex="0">
    <a is="0" id="neg" class="btn btn-default" href="javascript:void(0)">No</a>
    <a is="1" id="pos" class="btn btn-default" href="javascript:void(0)">Yes</a>
  </div>
</div>

接下来直接上实现代码，同时给你讲清楚jQuery怎么给已有类的元素添加新类：

核心jQuery实现 #

$(document).ready(function() {
  // 绑定No按钮的点击事件
  $('#neg').on('click', function() {
    // 给当前按钮添加btn-danger类（不会覆盖原有类）
    $(this).addClass('btn-danger');
    // 如果需要互斥状态，移除Yes按钮的成功类
    $('#pos').removeClass('btn-success');
    // 同步更新隐藏输入框的值，符合表单逻辑
    $('input[name="someName"]').val(0);
  });

  // 绑定Yes按钮的点击事件
  $('#pos').on('click', function() {
    // 给当前按钮添加btn-success类
    $(this).addClass('btn-success');
    // 移除No按钮的危险类
    $('#neg').removeClass('btn-danger');
    // 更新隐藏输入框值
    $('input[name="someName"]').val(1);
  });
});

关于jQuery添加类的关键知识点 #

• addClass()方法：这是给已有类的元素加新类的核心，它会保留元素原有的所有类，只把新类追加进去。比如你的按钮原本有btn btn-default，调用addClass('btn-danger')后，元素的类就变成btn btn-default btn-danger，完全不会覆盖原有样式。
• 如果需要点击时切换类（点一下加，再点一下删），可以用toggleClass('类名')，这个方法会自动判断元素是否已有该类，然后执行添加或移除操作。
• 如果要替换类（比如把默认类换成状态类），可以用removeClass('btn-default').addClass('btn-danger')，先移除旧类再添加新类，避免样式冲突。

小提示 #

给a标签加href="javascript:void(0)"是为了避免点击按钮时页面跳转，保证交互正常。另外，Bootstrap的按钮类支持叠加，btn-default和btn-danger/btn-success一起用会保留按钮基础样式同时加上状态色，效果更协调。

内容的提问来源于stack exchange，提问作者Milon Hossain