如何通过循环展示数组项？jQuery中push数组后append到DIV无响应如何解决

问题原因 #

• canvasArray是定义在.button点击事件回调内部的局部变量，如果你把DOM追加的代码写在了回调外部，外部作用域无法访问到这个变量，自然不会有内容输出，也不会触发报错。
• 若追加代码没有放在点击回调内部，会在页面加载完成后立刻执行，此时你还未点击按钮触发数组赋值逻辑，canvasArray要么未定义要么是空数组，页面自然不会有变化。

解决方法 #

将DOM追加逻辑放到点击事件回调内部，放在数组赋值完成的位置即可，修正后的代码如下：

$('.button').on('click', function(){
   const canvasArray = [];
   $('.box').each(function(){
       var boxName = $(this).text();
       canvasArray.push(boxName);
   });
   console.log(canvasArray);
   // 追加逻辑移到此处
   $.each(canvasArray, function(index, value){
       $("#result").append(index + ": " + value + '<br>');
   });
});

如果需要避免多次点击重复追加内容，可以在追加前先清空目标容器：

$("#result").empty();
$.each(canvasArray, function(index, value){
    $("#result").append(index + ": " + value + '<br>');
});

内容的提问来源于stack exchange，提问作者Wagako