Не удается получить значения массива в цикле

Question

У меня есть быстрый вопрос noob: Я пытаюсь получить значения массива и распечатать их в html-элементе с помощью jQuery «on Click». Однако я не могу получить элементы массива. Для каждого элемента щелкнул он должен получить элемент массива с индексом i, так #item-0 должен получить значение "red" и т.д.

на консоли журналы 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>

Любая помощь будет оценена.

Answer 1

Это происходит потому, что, когда вы нажимаете кнопку, значение 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); 
    }); 
}; 

---

или использовать 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)); 
};