我们使用API获取1到5之间的数字.例如，您将从API获得4作为输入，然后您必须激活前四个锚标记 &

Question

首先，我们必须在其中创建五个锚标记，我们使用api来获取1到5之间的数字。例如，您将从API获得4作为输入，然后将活动类添加到前四个锚标签，在另一种情况下，您将获得3作为输入，然后将活动类添加到前3个锚标签。

let url = "http://localhost:3000/api/hygiene";
let main = document.querySelector(".insert");
let cardData = "";
/*get request*/
fetch(url)
.then(res => res.json())
.then(data => {
data.forEach(function(item,index){

cardData += `
<div class="card my-2 mx-2 product_card" style="width: 18rem;">
<img src="http://localhost:3000/product/${item.image[0].filename}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${item.title}</h5>
<h6 class="card-subtitle mb-2 text-muted">${item.category}</h6>
<div class="rate ">
<a href="#!">★</a>
<a href="#!">★</a>
<a href="#!">★</a>
<a href="#!" >★</a>
<a href="#!" >★</a>
</div>
<p class="card-text">${item.sortDescription}</p>
</div>
<div class="card-body d-flex">
<div class="price">
<span class="before">₹${item.before}</span>
<span class="current">₹${item.after}</span>
</div>
<a href="#${"product"+item._id}" data-bs-toggle="modal" class="btn btn-secondary">more</a>
</div>
</div>`;
})
main.innerHTML = cardData;

})
.catch((e)=>{
console.log(e)
})

添加class

<div class="rate ">                               
<a href="#!">★</a>                                              
<a href="#!">★</a>                                                 
<a href="#!">★</a>                                                 
<a href="#!" >★</a>                                                 
<a href="#!" >★</a>                                            </div>

Answer 1

我找到了正确答案和它的工作

let url = "http://localhost:3000/api/hygiene"
let main = document.querySelector(".insert");
let module = document.querySelector(".moduls");
let rate = document.querySelector(".rate");

let star = "";
let cardData = "";
let detailsData = "";

/*get request*/
fetch(url)
.then(res => res.json())
.then(data => {
data.forEach(function(item,index){

let noStar = Number(item.star) // declare no of elements you want to add active class

cardData += `
<div class="card my-2 mx-2 product_card" style="width: 18rem;">
<img src="http://localhost:3000/product/${item.image[0].filename}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${item.title}</h5>
<h6 class="card-subtitle mb-2 text-muted">${item.category}</h6>
${stars()} // call function to add elements
<p class="card-text">${item.sortDescription}</p>
</div>
<div class="card-body d-flex">
<div class="price">
<span class="before">₹${item.before}</span>
<span class="current">₹${item.after}</span>
</div>
<a href="#${"product"+item._id}" data-bs-toggle="modal" class="btn btn-secondary">more</a>
</div>
</div>`;


function stars(){
function starArr(){
let starsArr = [];
for (let i = 1; i <= 5; i++) {
starsArr.push(
`<a  href="#!" class="${i <= noStar ? 'active' : ''}">★ </a>`
);
}
return starsArr.join("")
}
return `<div class="rate ">${starArr()}</div>`;
}

})
main.innerHTML = cardData;
})
.catch((e)=>{
console.log(e)
})

代码👆

Answer 2

您可以使用基于API中的值有条件地呈现元素的概念

注意:我刚刚在星星上添加了背景色，你可以自定义它。

链接:https://stackblitz.com/edit/react-mtm3nz?file=src%2FApp.js

参考下面的代码

import React, { useState, useEffect } from 'react';
import './style.css';
const totalStars = 5;
const App = () => {
const [starCount, setStarCount] = useState(0);
useEffect(() => {
// make your API call here and setStarCount to the value received
setStarCount(2); // do this after you have your result from the API
}, []);
const renderStars = () => {
let starsArr = [];
for (let i = 1; i <= totalStars; i++) {
starsArr.push(
<a key={i} href="#!" className={i <= starCount ? 'active' : ''}>
★
</a>
);
}
return starsArr;
};
return <div className="rate ">{renderStars()}</div>;
};
export default App;