Question

我需要将类添加到div .panel-default但是某处错了。以及如何编写最短的代码

有我的代码：

$('input:radio[name="payment-type"]').click(function() {
  if ($(this).is(':checked'))
    $(this).closest('.panel-default').addClass("style1");
  if ($(this).not(':checked'))
    $(this).closest('.panel-default').removeClass("style1");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="panel panel-default">
  <div class="panel-body">
    <div class="form-group type-group">
      <input type="radio" id="wallet-payment" name="payment-type" value="1">
      <label for="wallet-payment">Add Money to Wallet</label>
    </div>
  </div>
</div>

Answer 1

使用toggleClass()

$('input:radio[name="payment-type"]').click(function() {
    $(this).closest('.panel-default').toggleClass("style1", this.checked);
});

问题在于使用.not()（它是一个过滤方法，用于从调用集中删除与传递的参数匹配的元素），这将返回一个总是真实的jQuery对象，所以无关紧要对于复选框的选中状态，removeClass将被执行。

由于您有单选按钮，您可能必须从之前选择的项目中删除该类，因此您可以尝试

$('input:radio[name="payment-type"]').click(function() {
  $('.panel-default.style1').has('input:radio[name="payment-type"]').removeClass('style1');
  $(this).closest('.panel-default').toggleClass("style1", this.checked);
});

.style1 {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel panel-default">
  <div class="panel-body">
    <div class="form-group type-group">
      <input type="radio" id="wallet-payment" name="payment-type" value="1" />
      <label for="wallet-payment">Add Money to Wallet</label>
    </div>
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-body">
    <div class="form-group type-group">
      <input type="radio" id="something-else" name="payment-type" value="2" />
      <label for="something-else">Something else</label>
    </div>
  </div>
</div>

Answer 2

只需使用if-else语句，如下所示： -

$('input:radio[name="payment-type"]').click(function() {
  if ($(this).is(':checked'))
    $(this).closest('.panel-default').addClass("style1");
  else
    $(this).closest('.panel-default').removeClass("style1");
});

Answer 3

您的removeClass代码未被调用。

您需要使用复选框而不是单选按钮，因为您需要选中/取消选中该值。否则您应该使用else条件而不是第二个if循环：

$('input:checkbox[name="payment-type"]').click(function() {
  if ($(this).is(':checked'))
    $(this).closest('.panel-default').addClass("style1");
  else
    $(this).closest('.panel-default').removeClass("style1");
});

Working Demo

Answer 4

简单而甜蜜......

$('input:radio[name="payment-type"]').click(function() {
    $(this).closest('.panel-default').toggleClass("style1", this.checked);
});

Answer 5

根据您的最新修改，您可以尝试以下内容：

＆＃13;

$('input:radio[name="payment-type"]').change(function() {
  $('.style1').removeClass('style1');
  $(this).closest('.panel-default').toggleClass("style1", this.checked);
});

＆＃13;

.style1{background:red;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-6 payment-type1">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="form-group type-group">
        <input type="radio" id="wallet-payment" name="payment-type" value="1">
        <label for="wallet-payment">Add Money to Wallet</label>
      </div>
    </div>
  </div>
</div>
<div class="col-lg-6 payment-type2">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="form-group type-group">
        <input type="radio" id="auto-payment" name="payment-type" value="2">
        <label for="auto-payment">Auto payment</label>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 6

好的，但如果我有两个单选按钮如何删除类，那么我点击了另一个按钮？

＆＃13;

$('input:radio[name="payment-type"]').click(function() {
  $(this).closest('.panel-default').toggleClass("style1", this.checked);
});

＆＃13;

<div class="col-lg-6 payment-type1">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="form-group type-group">
        <input type="radio" id="wallet-payment" name="payment-type" value="1">
        <label for="wallet-payment">Add Money to Wallet</label>
      </div>
    </div>
  </div>
</div>
<div class="col-lg-6 payment-type2">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="form-group type-group">
        <input type="radio" id="auto-payment" name="payment-type" value="2">
        <label for="auto-payment">Auto payment</label>
      </div>
    </div>
  </div>
</div>

＆＃13;

addclass的错误在哪里？

6 个答案:

Working Demo