javascript - 单独切换具有相同类的单个 div 的类

Question

我有 3 个 div 可以点击显示下一个 div。我还需要 onclick 到所选 div 的 toggleClass，问题是如果单击具有相同类的另一个 div，则 toggleclass 保留在先前选择的另一个 div 上。

我试过 toggleClass 但它不会从以前选择的 div 中删除。再补充一点:如果选择了 Pay with Other，我希望 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 只指向正在处理事件的元素