jQuery如何在现有的类元素中添加另一个值

Question

我在这里有 html 代码 sn-p，其中我有 2 个使用引导程序创建的按钮，如果有人单击“否”，我想添加 btn-danger，如果在锚类中单击“是”，我想添加 btn-success .

<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" style="">
                      <a is="0" id="neg" class="btn active btn-danger">No</a>
                      <a is="1" id="pos" class="btn ">Yes</a>
                    </div>
            </div>

Answer 1

$(document).ready(function(){
  $('#neg').click(function(){
    if (!$(this).hasClass('btn-danger')) {
      $(this).addClass('btn-danger')
    }
  })
  $('#pos').click(function(){
    if (!$(this).hasClass('btn-success')) {
      $(this).addClass('btn-success')
    }
  })
})

addClasson click，如果该行为是反复出现的，请将其改进为更通用。

Answer 2

使用您想要在单击时添加的类添加按钮并为其添加数据属性。

我已将您的 a.btn 更改为 buttons，因为它似乎更适合此用例

$('button').on('click', function() {
  $('button').removeClass('btn-success btn-danger');
  $(this).addClass($(this).data('addClass'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<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" style="">
    <button is="0" id="neg" data-add-class="btn-danger" class="btn btn-primary active">No</button>
    <button is="1" id="pos" data-add-class="btn-success" class="btn btn-primary ">Yes</button>
  </div>
</div>