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 클래스를 제거했다에게 있어야합니다. 아래 코드와 마찬가지로 확인란이 선택 될 때마다이 코드를 제거하려고한다고 가정합니다.

Answer 2

$(".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>

은 아마 당신은 여러 이벤트 바인딩을 방지하기 위해 코드를 수정해야합니다. 루프에서 이벤트를 바인딩하는 것은 좋지 않습니다.

$(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>