我想添加单个图像多次从用户收到的每计数

Question

我想多次添加单个图像，我将从user获得计数。我想把这个图像添加到特定的类中，它将在slick-slider cards中。

我已经尝试过JavaScript，我通过for循环显示图像，但它只在一张卡片中可见所有卡片都有不同数量的图像

HTML:

<div class="testimonialCarousel">
<div class="item">
<div class="testimonialCard">
<div class="ratingStar"></div>
<div class="testimonialContent">
<p class="testimonailText">Lorem ipsum dolor sit amet consectetur. Augue orci sem nisi arcu sed faucibus fermentum. Ipsum sed morbi dapibus libero id massa fermentum id lorem justo.</p>
<p class="authorName">Ajit Babaleshwar</p>
</div>       
</div>
</div>
<div class="item">
<div class="testimonialCard">
<div class="ratingStar"></div>
<div class="testimonialContent">
<p class="testimonailText">Lorem ipsum dolor sit amet consectetur. Eu egestas non etiam netus velit vitae non tortor at. Viverra tempus nunc eget aliquam. Cursus sit elementum bibendum in duis amet in. Pulvinar turpis purus nunc nunc tellus. Suscipit pellentesque neque faucibus urna cursus.</p>
<p class="authorName">Nahia Colunga</p>
</div>       
</div>
</div>
<div class="item">
<div class="testimonialCard">
<div class="ratingStar"></div>
<div class="testimonialContent">
<p class="testimonailText">Lorem ipsum dolor sit amet consectetur. Eget dictumst est neque suspendisse arcu ullamcorper. Nascetur faucibus faucibus habitant auctor. Dui tortor nullam aliquam et. Amet et consectetur gravida sed ullamcorper dui odio. Sit natoque fusce egestas amet etiam cras.</p>
<p class="authorName">Ajit Babaleshwar</p>
</div>       
</div>
</div>
<div class="item">
<div class="testimonialCard">
<div class="ratingStar"></div>
<div class="testimonialContent">
<p class="testimonailText">Lorem ipsum dolor sit amet consectetur. Augue orci sem nisi arcu sed faucibus fermentum. Ipsum sed morbi dapibus libero id massa fermentum id lorem justo.</p>
<p class="authorName">Ajit Babaleshwar</p>
</div>       
</div>
</div>
</div>

JS

var numberOfRating = 5;
var theLeftSide = document.querySelectorAll(".ratingStar");
ratingsRow()
function ratingsRow() {
for(i = 0; i < numberOfRating; i++) {
var stars = document.createElement("img");
stars.src = "assets/images/rating.png";
theLeftSide[0].appendChild(stars);
}
}

Answer 1

如果我明白你想要什么，这段代码可能会工作。
使用@CBroe指定的两个循环，一个遍历类"ratingStar"的每个DIV另一个用于插入图像

var numberOfRating = 5;
// For each Element with class "ratingStar"
$('.ratingStar').each(function(index){

// For each Rating
for(i=0;i<numberOfRating;i++)
{
// Create Image
var stars = document.createElement("img");
stars.src = "rating.png";
// Append Image
$(this).append(stars);
}
// End - For each Rating
});
// End - each Element with class "ratingStar"

Answer 2

@juan更新了上面的代码，下面的代码为我工作，

var cardDivs = document.getElementsByClassName('testimonialCard');
for (var i=0; i<cardDivs.length; i++) {
//Below logic is for getting count from card
var selectedDiv = cardDivs[i];
var val = selectedDiv.getElementsByClassName('starsToShow')[0].value;
var starCount = parseInt(val);

//appending star logic below
let starElement = selectedDiv.getElementsByClassName('ratingStar')[0];
for(let j = 0; j < starCount; j++){
var stars = document.createElement("img");
stars.src = "rating.png";
starElement.append(stars);
}
}