單擊後更改顏色

單擊按鈕後，只有選中的輸入應該將其父顏色更改爲紅色（在本例中爲「第一個」）。當我點擊時，沒有任何改變。單擊後更改顏色

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

來源

2017-08-30 gorrch

你點擊邏輯是好的，這個問題是因爲你已經放在你的代碼中，立即運行的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代碼演示

來源

2017-08-30 08:00:20

編輯html複選框有一個額外的角支架 – Niladri

只需要添加「$ 「功能之前，例子;

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

來源

2017-08-30 08:01:36

正確的答案 - 你也不需要'（）'在ready處理程序之後。 – Jamiec

單擊後更改顏色

回答

相關問題