Question

单击按钮后，只有选中的输入应更改其红色的父颜色（在本例中为“first”）。当我点击时，没有任何改变。

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

Answer 1

您的点击逻辑很好，问题是因为您已将代码放在立即运行的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代码

Answer 2

只需添加＆＃34; $＆＃34;在函数之前，例如;

$(function fun() {
    $('#duod').on('click', function () {
    $('.tu').filter(':checked').parent().css('color', 'red');
    })
})();

单击后更改颜色

2 个答案: