Question

我的剧本遇到了小问题。

脚本看起来很有效，但每次添加所选类时。它在onclick之前重置它，但是类不会删除它。可能有什么问题？

集合中只有.payment类的一个元素应该有一个.selected类

＆＃13;

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

＆＃13;

.selected {	
background: #eaeaea;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="payment">
	<input type="radio" /> example
</div>

<div class="payment">
	<input type="radio" /> of my
</div>

<div class="payment">
	<input type="radio" /> problem
</div>

＆＃13;

Answer 1

您刚刚开始删除selected课程。我假设您希望每次选中复选框时都将其删除，如下面的代码所示。

＆＃13;

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

＆＃13;

.selected {	
background: #eaeaea;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="payment">
	<input type="radio" /> example
</div>

<div class="payment">
	<input type="radio" /> of my
</div>

<div class="payment">
	<input type="radio" /> problem
</div>

＆＃13;

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);
        });
    });

演示：http://jsfiddle.net/lotusgodkk/GCu2D/2237/

Answer 3

从所有.payment中删除类并为当前元素添加类：

＆＃13;

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

＆＃13;

.selected {	
background: #eaeaea;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="payment">
	<input type="radio" name="myRadio"/> example
</div>

<div class="payment">
	<input type="radio" name="myRadio"/> of my
</div>

<div class="payment">
	<input type="radio" name="myRadio"/> problem
</div>

＆＃13;

jQuery不会在.each函数之前删除类

3 个答案: