Javascript 按钮颜色变化

Question

我有一个带有 2 个单选按钮的表单:批准和拒绝。任务是:如果单击“批准”按钮，“拒绝”按钮需要具有默认样式，并且“批准”按钮需要变为绿色(.btn-成功)。如果单击“拒绝”按钮，“批准”按钮需要具有默认样式并且“拒绝”按钮需要变为红色(.btn-danger)

HTML:

<div class="btn-group-vertical" data-toggle="buttons" id="CategoryInputs">
  <label class="btn btn-default">
     <input id="approve" name="status" required="" type="radio" value="category 1" />APPROVE
  </label>
  <label class="btn btn-default">
     <input id="deny" name="status" required="" type="radio" value="category 2" />DENY
  </label>
</div>

JavaScript 代码:

 $(document).ready(function() {
  // highlight selected category
  $("#CategoryInputs input:radio").change(function(){
    $("#approve").parent().removeClass("btn-success");
    $("#approve").parent().addClass("btn-default");
    if($(this).is(":checked")){
      $(this).parent().removeClass("btn-default");
      $(this).parent().addClass("btn-success");
    }else{
      $(this).parent().removeClass("btn-success");
      $(this).parent().addClass("btn-default");
    }

    $("#deny").parent().removeClass("btn-danger");
    $("#deny").parent().addClass("btn-default");
    if($(this).is(":checked")){
      $(this).parent().removeClass("btn-default");
      $(this).parent().addClass("btn-danger");
    }else{
      $(this).parent().removeClass("btn-danger");
      $(this).parent().addClass("btn-default");
    }
  });
  // end highlight
});

我显然做错了什么。因为两个按钮都变红了:(

Answer 1

您正在同时申请和删除类(class)。看看这个例子。

$(document).ready(function() {
  // highlight selected category
  $("#CategoryInputs input:radio").change(function(){
    $("#approve, #deny").parent().removeClass("btn-success btn-danger").addClass("btn-default");    
    
    if($(this).is(":checked") && this.id == "approve"){
      $(this).parent().removeClass("btn-default").addClass("btn-success");
    }else{
      $(this).parent().removeClass("btn-default").addClass("btn-danger");
    }    
    
  });
  // end highlight
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="btn-group-vertical" data-toggle="buttons" id="CategoryInputs">
  <label class="btn btn-default">
     <input id="approve" name="status" required="" type="radio" value="category 1" />APPROVE
  </label>
  <label class="btn btn-default">
     <input id="deny" name="status" required="" type="radio" value="category 2" />DENY
  </label>
</div>