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()类，如下所示：

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

You can test it here。在这种情况下，我们会选择所有其他匹配的'.box-ul .btn .dot'元素，过滤掉我们使用.not()点击的元素，然后对它们执行.removeClass()。最后一部分仍然是.toggleClass()，因此您也可以通过点击活动部分来取消选择。如果不希望能够取消选择（甚至更像是一个单选按钮），那么只需将其更改为.addClass()。

Answer 2

在所有内容上，而不是毯子.removeClass（），我会这样做：

$(this).closest('.box-ul').find('.btn .dot').not(this).removeClass('clicked');

这只取消选中点击的单选按钮的.box-ul。

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

2 个答案: