JQuery仅切换1个项目而其他未点击的项目

Question

好吧,我有这个Jquery将切换页面上的一些单选按钮.我想要它,所以当有人点击其中一个单选按钮时,其他按钮不会被点击.目前,我有它的方式,他们可以一次选择3,我需要它像一个常规的单选按钮,一个被点击,其他不是

jQuery的:

$(function () {
  $('.box-ul .btn .dot').click(function () {
    $(this).toggleClass('clicked');
  });
});

HTML:

<div class="box-ul box-video right">
    <ul>
        <li><span class="yes"></span><p>Easy to Use</p></li>
        <li><span class="yes"></span><p>Step by Step<br /><span>details instructions</span></p></li>
        <li><span class="yes"></span><p>Setup time<br /><span>under 30 mins</span></p></li>
        <li class="btn btn-expanded">
          <div class="btn-t">
            <span class="dot left"></span>
          <p class="left">Expanded<br />
            <span>This is the extend button It has space for slightly more info.</span>
          </p>
            <div class="cl">&nbsp;</div>
          </div>
        </li>
        <li class="btn">
          <div class="btn-t">
            <span class="dot left"></span>
            <p class="left">Green Doggies</p>
            <div class="cl">&nbsp;</div>
          </div>
          </li>
        <li class="btn">
          <div class="btn-t">
            <span class="dot left"></span>
            <p class="left">Email Support</p>
            <div class="cl">&nbsp;</div>
          </div>
        </li>
    </ul>
</div>

Answer 1

.removeClass()在所有匹配元素上使用class,这些元素不是您首先单击的元素,如下所示:

$('.box-ul .btn .dot').click(function () {
  $('.box-ul .btn .dot').not(this).removeClass('clicked');    
  $(this).toggleClass('clicked');
});?

你可以在这里测试一下.在这种情况下,我们选择所有其他匹配'.box-ul .btn .dot'元素,过滤掉我们点击的元素.not(),然后.removeClass()对它们进行操作.最后一部分仍然是一个,.toggleClass()所以你可以通过点击活动的一个来取消选择.如果你不希望能够取消选择(甚至更像是一个单选按钮),然后就修改成.addClass().