5

さて、ページ上のいくつかのラジオボタンを切り替えるこのJqueryがあります。誰かがラジオボタンの1つをクリックしても、他のボタンはクリックされないようにしたいと思います。現在、私が持っている方法では、一度に3つを選択できます。通常のラジオボタンのように、1つはクリックされ、他はクリックされないようにする必要があります。

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>
4

2 に答える 2

10

次のように、最初にクリックした要素ではない.removeClass()すべての一致する要素でクラスを使用します。

$('.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()ます。

于 2010-07-18T20:53:32.263 に答える
0

すべてにブランケット.removeClass（）を使用する代わりに、次のようにします。

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

これにより、クリックされたラジオボタンの.box-ul内のもののみが選択解除されます。

于 2010-07-18T20:56:55.780 に答える