jquery - 在类/jQuery 之间切换

Question

我有一个登录表单，其中包含一些输入法，例如下拉菜单、空白字段。我的客户需要一个像这样选择是或否开关的功能。

所以我在点击时使用了 jQuery 添加/删除功能。

HTML:

<div class="form-group">
  <label for="member" class="col-md-5 col-sm-12 control-label">
    Do you have the car right now?
  </label>
  <div class="col-lg-10">
    <div class="btn-group">
      <button type="button" class="btn btn-default btn-switch switch1 active"> <span class="goods">Yes</span>
      </button>
      <div class="btn-group">
        <button type="button" class="btn btn-default btn-switch switch1"><span class="services">No</span>
        </button>
      </div>
    </div>
  </div>
</div>

CSS:

.switch1.active{
  background: #e46a5d!important;
  color: #fff;
  font-weight: normal;
  text-shadow: none;
}

这是 jsfiddle 的工作链接但我的问题是..

在某些页面中，我需要添加更多的是或否字段，例如 5 或 6。所以我需要更多地重复 jquery 脚本。

因此寻找在这种情况下执行的最佳实践。

Answer 1

无需更改您的 html 结构，您只需用它替换您的 JS；

   $('.btn-switch').click(function() {
     var $group = $(this).closest('.form-group');
     $('.btn-switch', $group).removeClass("active");
     $(this).addClass("active");
   });