Cannot get array values ​​in for loop

I have a quick noob question: I'm trying to get the values ​​of an array and print them in an html element using jQuery "on Click". However, I cannot get the elements of the array. For each clicked item, it should get an array element in the index i, so it #item-0should get a value "red", etc.

Magazines console undefined.

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>
Run codeHide result

Any help would be appreciated.

+4
source share
2 answers

, , , i descriptions.length ( ), , undefined.

, let var, .

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);
  });
};

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);
};
+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));
};
+2

Source: https://habr.com/ru/post/1666600/


All Articles