javascript - 仅使用最后一个数组项动态生成的内容

Question

我有以下数据数组:

let testimonials = [
        {"name":"Carol Jadraque","service":"Logo Design","quote":"Anton from EG-graphics displays a high degree of professionalism; he is always responsive, caters to the client’s wants & needs and is highly reliable."},
        {"name":"Tony Salloum","service":"Animation","quote":"With a professional approach, attention to details and high dedication to his work, Anton has produced several videos for us, all done on schedule and to the highest of standards. I will definitely use his services again."},
        {"name":"Irina Feldman","service":"Website Design","quote":"Anton is reliable and attentive to detail. We loved his creative approach and ability to quickly respond to our requests and concerns."},
        {"name":"Lilianne Lord","service":"Private Tutoring","quote":"Anton is super friendly, skilled and genuinely interested in helping you out! Highly professional tutor and would recommend him to anyone looking for inspiration as well as a tutor!"},
    ];

我有一个循环应该使用该数据生成如下内容:

for (var i = 0; i < testimonials.length; i++) { 
   var content = "";
   content += '<div class="item"> <div class="testi_item"> <p class="testimonial-text">' + testimonials[i].quote + '</p> <h4 class="testimonial-name">' + testimonials[i].name + '</h4><h5 class="testimonial-service">' + testimonials[i].service + '</h5> </div> </div>';
   console.log(content);
}
$('.testi_slider').html(content);

问题是它使用数组中第 4 个对象的数据生成 4 个内容实例。我相信我的错误可能与使用 testimonials[i] 有关，但是我不确定正确的方法是什么，因为 i 的值应该是从 0 开始到 3。

谁能解释一下我的错误在哪里？

Answer 1

问题是您在循环的每次迭代中重新清空 content 字符串。考虑在循环之前声明 content:

var content = "";
for (var i = 0; i < testimonials.length; i++) { 

   content += '<div class="item"> <div class="testi_item"> <p class="testimonial-text">' + testimonials[i].quote + '</p> <h4 class="testimonial-name">' + testimonials[i].name + '</h4><h5 class="testimonial-service">' + testimonials[i].service + '</h5> </div> </div>';
   console.log(content);
}
$('.testi_slider').html(content);