jquery の for 文がよくわからない

Question

jquery で for 文がうまく使えません。
チェックボックスにチェックが入っているかによって、対応するテキストを表示・非表示する、というものをつくりたいのですが、うまくいきません。
下のコードだと、どのチェックボックスに操作をしても id="input4" のチェックが参照されてしまうようです。

<form method="post">
    <input type="checkbox", name="a", id="input1"> a
    <input type="checkbox", name="b", id="input2"> b
    <input type="checkbox", name="c", id="input3"> c
    <input type="checkbox", name="d", id="input4"> d
<form>

<div id="d1"> aaa <\div>
<div id="d2"> bbb <\div>
<div id="d3"> ccc <\div>

$(function(){
    for (var i=1; i<4; i++){
        $('#input'+i).on('click', function(){
            if($('#input'+i).prop('checked')){
                $('.d'+i).fadeIn();
            }else{
                $('.d'+i).fadeOut();
            }
        })
    }
})

jquery のコードで for 文を消し次のように書くと、1つめのチェックボックスについては期待の動作をします。

$(function(){
    i = 1 //追加
        $('#input'+i).on('click', function(){
            if($('#input'+i).prop('checked')){
                $('.d'+i).fadeIn();
            }else{
                $('.d'+i).fadeOut();
            }
        })
})

調べてみましたがわからなかったため、このような動作になる理由と、正しくはどう書くべきなのかご教授いただけるとありがたいです。また、こちらに記載したコードはつまずいている部分を単純な問題に置き換えて書き直したコードなので、間違い等ある可能性があります、すみません。

Answer 1

for (var i=1; i<4; i++) ⇒ for (let i=1; i<4; i++) でとりあえず問題は解消されます。

【JavaScript - 【javascript】for文でのletとvarの違い｜teratail】
https://teratail.com/questions/62502

---

<!--                  ↓         ↓ これ不要です。 -->
<input type="checkbox", name="a", id="input1">

Comments

[goro_gnm]

教えていただいた通り、var を let に変えて解決しました！ありがとうございます！