forループの配列値を取得できません

Question

私は素早くnoobの質問があります：私は配列の値を取得し、jQuery "html要素"に "Click"で印刷しようとしています。しかし、私は配列の要素を取得することはできません。それぞれのコンソールログはundefined

等、そう #item-0が "red"の値を取得する必要があり、インデックス iで配列要素を取得する必要がアイテムをクリックしました。

var descriptions = ["red", "blue", "green", "purple", "white", "black"]; 
 

 
for (var i = 0; i < descriptions.length; i++) { 
 
    $("#item-" + i).on("click", function() { 
 
    var currentDescr = descriptions[i]; 
 
    console.log(currentDescr); 
 

 
    $("#footer-text").html(currentDescr); 
 
    }); 
 
};

.as-console-wrapper{top:0;max-height:100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

任意の助けいただければ幸いです。

Answer 1

のボタンをクリックすると、そのインデックスに値がないので、undefinedとなるので、その時点でループは壊れています（）。

ブロックレベルのスコープを提供するvarの代わりにletを使用して解決できます。

var descriptions = ["red","blue","green","purple","white","black"]; 


for (let i = 0; i < descriptions.length; i++) { 
    $("#item-"+i).on("click", function(){ 
    var currentDescr = descriptions[i]; 
    console.log(currentDescr); 
    $("#footer-text").html(currentDescr); 
    }); 
}; 

---

又はclosure functionを使用して、引数としてiを渡します。

var descriptions = ["red","blue","green","purple","white","black"]; 


for (let i = 0; i < descriptions.length; i++) { 
    (function(index){ 
    $("#item-" + index).on("click", function(){ 
     var currentDescr = descriptions[index]; 
     console.log(currentDescr); 
     $("#footer-text").html(currentDescr); 
    }); 
    })(i); 
}; 

Answer 2

ループはiの不正な値につながる、イベントが発生する前に仕上げている...これを試してみてください：

var descriptions = ["red","blue","green","purple","white","black"]; 


for (var i = 0; i < descriptions.length; i++) { 

    (function(i){ 
     $("#item-"+i).on("click", function(){ 

      var currentDescr = descriptions[i]; 
      console.log(currentDescr); 
      $("#footer-text").html(currentDescr); 

     }); 
    }(i)); 
};