在类之间切换/ 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");
   });

Answer 2

您应该将按钮包装在同一个父级中，因为我认为在另一个.btn-group

中没有包含否按钮的好处

<div class="btn-group">
  <button type="button" class="btn btn-default btn-switch active"> <span class="goods">Yes</span>
  </button>
  <button type="button" class="btn btn-default btn-switch"><span class="services">No</span>
  </button>
</div>

使用公共类附加事件处理程序，即.btn-switch，然后使用DOM关系删除具有父DOM结构的类。

 $(document).on("click", ".btn-switch", function() {
   var btnGroup = $(this).closest('.btn-group');
   btnGroup.find(".active").removeClass("active");

   //$(this).siblings(".active").removeClass("active");

   $(this).addClass("active");
 });

Fiddle

参考

1. .closest()
2. .find()
3. .siblings()

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

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

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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 active"> <span class="goods">Yes</span>
      </button>
      <button type="button" class="btn btn-default btn-switch"><span class="services">No</span>
      </button>
    </div>
  </div>
</div>

<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 active"> <span class="goods">Yes</span>
      </button>
      <button type="button" class="btn btn-default btn-switch"><span class="services">No</span>
      </button>
    </div>
  </div>
</div>

<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 active"> <span class="goods">Yes</span>
      </button>
      <button type="button" class="btn btn-default btn-switch"><span class="services">No</span>
      </button>
    </div>
  </div>
</div>