クリック後に色を変更する

ボタンをクリックした後、チェックされた入力のみが赤色（この場合は「最初」）に変更されます。クリックすると、何も変わりませんでした。クリック後に色を変更する

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

あなたのクリックのロジックを使用すると、すぐに実行生命維持にあなたのコードを配置したので、問題がある、結構です。これはの前に、 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>

編集：デモ

出典

2017-08-30 08:00:20

チェックボックスには余分な角括弧が1つあります。 – Niladri

で固定されたhtmlコードのみ「$を追加必要"関数の前に、例;

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

出典

2017-08-30 08:01:36

正解です。レディハンドラの後に '（）'は必要ありません。 – Jamiec

クリック後に色を変更する

答えて

関連する問題