Question

我有3个div，它们会自动显示下一个div。我还需要onclick to selected div的toggleClass，问题是，如果单击具有相同类的另一个div，则toggleclass会保留在先前选择的另一个div上。

我已经尝试过toggleClass，但是它不会从以前选择的div中删除。另外一项补充：我想如果选择“与其他人一起付款”，href的文本将从“提交付款”更改为“继续”，并在选择其他div时又改回来。

$(document).ready(function() {
  $('.payment').on('click', function() {
    var $paymentoptions = $(this).next('.paymentoptions');
    $paymentoptions.slideToggle();
    $('.paymentoptions').not($paymentoptions).slideUp();
    $(this).toggleClass('active');
  });
  $(".addbilld").click(function() {
    $('#submit').html('Continue');
  });
});

.paymentoptions {
  display: none
}

.payment.active {
  background: #dedede
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class="form">
  <h3>Payment Options</h3>
  <div class="payment"><span></span>ACH Payment</div>
  <div class="paymentoptions">
    <div>
      <div>
        <label>Bank Name</label>
        <input type="text" disabled value="Bank of America" />
      </div>
      <div>
        <label>Account Number</label>
        <input type="text" disabled value="*****6372" />
      </div>
      <a href="#" id="submit">+ add account</a> </div>
  </div>
  <div class="payment"><span></span>Credit Card <span class="cc"></span></div>
  <div class="paymentoptions">
    <div>
      <div>
        <label>Credit Card</label>
        <input type="text" disabled value="MasterCard" />
      </div>
      <div>
        <label>Credit Card Number</label>
        <input type="text" disabled value="**** **** **** 7271" />
      </div>
      <a href="#">+ add credit card</a> </div>
  </div>
  <div class="payment" id="addbilld"><span></span>Pay with Other </div>
</div>
<a href="#" class="link" id="submit">Submit Payment</a>

Answer 1

更改

$(this).toggleClass('active');

到

$('.payment').not(this).removeClass('active');
$(this).toggleClass('active');

this仅指向正在处理事件的元素

将单个div的类与单个类分别切换

1 个答案: