Question

我有一些按钮组，单击它时，它的toggleClass变为绿色，但是如果单击它变为默认颜色，则在任何地方。

我想使其分阶段进行，因此每当根按钮单击其子按钮时，应将其重置为默认值，例如假定单击了1到5，所有按钮都是绿色，如果我单击第二个按钮，则将保持选择范围1到2，并且将3、4、5重置为其默认颜色。

<div class="form-group">
    <label class="control-label">Pipeline Stage</label>
    <div id="PipelineStage" class="btn-group  btn-group-lg btn-group-justified" style="width: 100%; height: 18px;"> 
    <div class="btn-group  btn-group-lg" role="group">
        <button class="updateStatus btn btn-default input-block-level" value="hold"> </button> 
        </div>  
        <div class="btn-group  btn-group-lg" role="group">
        <button class="updateStatus btn btn-default input-block-level" value="hold"> </button> 
        </div>  
        <div class="btn-group  btn-group-lg" role="group">
        <button class="updateStatus btn btn-default input-block-level" value="hold"> </button> 
        </div>  
        <div class="btn-group  btn-group-lg" role="group">
        <button class="updateStatus btn btn-default input-block-level" value="hold"> </button> 
        </div>  
        <div class="btn-group  btn-group-lg" role="group">
        <button class="updateStatus btn btn-default input-block-level" value="hold"> </button> 
   </div>   
    </div>
  </div>

脚本

jQuery(document).ready(function() {
 $(".updateStatus").click(function () {
    $(this)
    .toggleClass(($(this).val() === "hold") ?  'btn-success':'btn-default')
        });
});

Answer 1

请尝试使用以下代码，并验证是否解决了问题。

jQuery(document).ready(function() {
  $(".updateStatus").click(function(event) {
    var currentObject = $(event.target);

    var max = currentObject.data("sequence");
    $(currentObject.closest("#PipelineStage").find(".btn-group .btn-success").each(function() {
      if ($(this).data("sequence") > max) {
        max = $(this).data("sequence")
      }
    }));

    if (currentObject.hasClass('btn-success') && max > currentObject.data("sequence")) {
      var updateBtns = $("#PipelineStage").find(".btn-group .btn-success");
      var results = [];
      for (var i = 0; i < updateBtns.length; i++) {
        if ($(updateBtns[i]).data("sequence") > currentObject.data("sequence")) {
          results.push(updateBtns[i]);
        }
      }
      for (var i = 0; i < results.length; i++) {
        $(results[i]).removeClass('btn-success');
      }
    }
    currentObject.toggleClass(($(event.target).val() === "hold") ? 'btn-success' : 'btn-default');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <label class="control-label">Pipeline Stage</label>
  <div id="PipelineStage" class="btn-group  btn-group-lg btn-group-justified" style="width: 100%; height: 18px;">
    <div class="btn-group  btn-group-lg" role="group">
      <button class="updateStatus btn btn-default input-block-level" value="hold" data-sequence="1"> </button>
    </div>
    <div class="btn-group  btn-group-lg" role="group">
      <button class="updateStatus btn btn-default input-block-level" value="hold" data-sequence="2"> </button>
    </div>
    <div class="btn-group  btn-group-lg" role="group">
      <button class="updateStatus btn btn-default input-block-level" value="hold" data-sequence="3"> </button>
    </div>
    <div class="btn-group  btn-group-lg" role="group">
      <button class="updateStatus btn btn-default input-block-level" value="hold" data-sequence="4"> </button>
    </div>
    <div class="btn-group  btn-group-lg" role="group">
      <button class="updateStatus btn btn-default input-block-level" value="hold" data-sequence="5"> </button>
    </div>
  </div>
</div>

如何使按钮组的行为像按钮阶段

1 个答案: