单击

Question

我有以下代码

<div class="row equal">
    <div class="col-md-12">
        <div class="col-md-4 panel">
            <h2>If you visit a bank do you...</h2>
            <div class="col-md-12">
                <a href="#"><span>A. </span>Do this.</a>
            </div>
            <div class="col-md-12">
                <a href="#" class="last"><span>B. </span>Do that.</a>
            </div>
        </div>
    </div>
</div>

正如您所看到的那样，有一个问题，然后是两个可能的答案。目前，我所做的只是以下

$( "a" ).click(function( event ) {
    event.preventDefault();
    $(this).toggleClass('active');
});

以上可能会更好地处理，但这是我可以解决的问题。因此，如果选择了答案，我会添加活动类，这将更改所选答案的背景颜色。

此刻一切正常，但我想知道如何确保只能选择一个答案？目前，我可以选择两个我不想让他们做的答案。

由于

Answer 1

试试这个：

//Remove all the active from the link from the `row`
$(this).closest('.row').find('a.active').removeClass('active');
//Add active only for this selector, what is an `a` tag.
$(this).addClass('active');

Answer 2

您可以点击锚点从其他元素中移除类active：

$( "a" ).click(function( event ) {
 event.preventDefault();
 $('.active').not(this).removeClass('active')
 $(this).toggleClass('active');
});

Answer 3

在.toggleClass()：

中执行此操作

$(this).toggleClass(function(){
    return $(this).closest('.panel').find('a.active').not(this).length ? "" : "active";
});

或

＆＃13;

＆＃13;

$('a').click(function() {
  $(this).toggleClass(function() {
    if ($(this).closest('.panel').find('a.active').not(this).length) {
      alert("You can't select other answer.");
      return;
    } else {
      return "active";
    }
  });
  return false;
});

＆＃13;

.active {
  color: red;
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row equal">
  <div class="col-md-12">
    <div class="col-md-4 panel">
      <h2>If you visit a bank do you...</h2>
      <div class="col-md-12">
        <a href="#"><span>A. </span>Do this.</a>
      </div>
      <div class="col-md-12">
        <a href="#" class="last"><span>B. </span>Do that.</a>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;