jQueryは.each関数の前にクラスを削除していません

Question

私のスクリプトには少し問題があります。

スクリプトは機能しているように見えますが、選択したクラスが追加されるたびに表示されます。それはonclickの前にそれをリセットしますが、クラスはそれを削除しません。何が問題なのでしょうか？コレクションから.paymentクラスの

つだけの要素は、あなたはほんの始まりにselectedクラスを削除した

$(".payment").each(function() { \t 
 
    $(".payment").removeClass("selected"); 
 
    $(this).on("click", function() { 
 
    $(this).addClass("selected"); 
 
    $(this).find('input[type="radio"]').prop("checked", true); 
 
    }); 
 
});

.selected { \t 
 
background: #eaeaea; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="payment"> 
 
\t <input type="radio" /> example 
 
</div> 
 

 
<div class="payment"> 
 
\t <input type="radio" /> of my 
 
</div> 
 

 
<div class="payment"> 
 
\t <input type="radio" /> problem 
 
</div>

Answer 1

.selectedクラスを持つ必要があります。下のコードのように、チェックボックスをオンにするたびに削除したいと思っています。

$(".payment").each(function() { \t 
 

 
    $(this).on("click", function() { 
 
    $(".payment").removeClass("selected"); 
 
\t \t $(this).addClass("selected"); 
 
\t \t $(this).find('input[type="radio"]').prop("checked", true); 
 
    }); 
 
});

.selected { \t 
 
background: #eaeaea; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="payment"> 
 
\t <input type="radio" /> example 
 
</div> 
 

 
<div class="payment"> 
 
\t <input type="radio" /> of my 
 
</div> 
 

 
<div class="payment"> 
 
\t <input type="radio" /> problem 
 
</div>

Answer 2

たぶん、あなたは複数のイベントバインディングを避けるために、あなたのコードを変更する必要があります。ループ内でイベントをバインドするのは良い方法ではありません。

$(document).ready(function() { 
     $(document).on("click", ".payment", function() { 
      $(".payment.selected").removeClass("selected"); 
      $(this).addClass("selected"); 
      $(this).find('input[type="radio"]').prop("checked", true); 
     }); 
    }); 

デモ：すべて.paymentからhttp://jsfiddle.net/lotusgodkk/GCu2D/2237/

Answer 3

削除クラスと現在の要素のクラスを追加します。

$(".payment").on("click", function() { 
 
    $(".payment").removeClass("selected"); 
 
    $(this).addClass("selected"); 
 
    $(this).find('input[type="radio"]').prop("checked", true) 
 
});

.selected { \t 
 
background: #eaeaea; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="payment"> 
 
\t <input type="radio" name="myRadio"/> example 
 
</div> 
 

 
<div class="payment"> 
 
\t <input type="radio" name="myRadio"/> of my 
 
</div> 
 

 
<div class="payment"> 
 
\t <input type="radio" name="myRadio"/> problem 
 
</div>