单击按钮后，只有选中的输入才应将其父颜色更改为红色(在本例中为“第一个”)。当我点击时，没有任何变化。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
(function fun() {
$('#duod').on('click', function() {
$('.tu').filter(':checked').parent().css('color', 'red');
})
})();
</script>
</head>
<body>
<div class="check">
First <input class="tu" type="checkbox">
</div>
<div class="check">>First
<input class="tu" type="checkbox">
</div>
<div class="check">
First <input class="tu" type="checkbox">
</div>
<button id="duod">button</button>
</body>
</html>最佳答案
您的点击逻辑很好，问题是因为您已将代码放入立即运行的 IIFE 中。这是在 DOM 加载并且不存在任何元素之前。
相反，您应该将代码放置在 document.ready 事件处理程序中，如下所示:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
$('#duod').on('click', function() {
$('.tu').filter(':checked').parent().css('color', 'red');
})
});
</script>
</head>
<body>
<div class="check">
First <input class="tu" type="checkbox">
</div>
<div class="check">First
<input class="tu" type="checkbox">
</div>
<div class="check">
First <input class="tu" type="checkbox">
</div>
<button id="duod">button</button>
</body>
</html>编辑:修复演示中的 html 代码
关于jquery - 点击后改变颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45954956/