gpt4 book ai didi

jquery - 点击后改变颜色

转载 作者:行者123 更新时间:2023-12-01 07:42:03 24 4
gpt4 key购买 nike

单击按钮后,只有选中的输入才应将其父颜色更改为红色(在本例中为“第一个”)。当我点击时,没有任何变化。

<!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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com