从具有相同 id 的元素列表中动态获取特定元素的值

Question

所以我正在尝试制作星级评分功能，但我一直坚持从变量动态设置值。 我不想让星星互动。 我希望使用变量的值来设置或填充它们。

这就是我获得星星的方式

<div>
    <span></span>
    <span class="rating" data-rating="0">
        <i class="star" data-checked="false" data-note="1">&#9733;</i>
        <i class="star" data-checked="false" data-note="2">&#9733;</i>
        <i class="star" data-checked="false" data-note="3">&#9733;</i>
        <i class="star" data-checked="false" data-note="4">&#9733;</i>
        <i class="star" data-checked="false" data-note="5">&#9733;</i>
    </span>
    <span>
        <input class="coach-id" hidden value="{{ coach.id }}">
    </span>
</div>

现在，我的问题是我为数据库中的条目生成了n次代码块。 这会产生一个问题，即每个块都将具有相同的 class。

我希望能够通过特定于每个块的变量动态设置它们。 这意味着数据库中的每个条目都会有一个评级列，它将是与该条目对应的星级值。

现在，星星通过以下脚本进行交互

const ratings = document.querySelectorAll('.rating');
const coach_id = document.querySelector('.coach-id').value;
ratings.forEach(rating =>
    rating.addEventListener('mouseleave', ratingHandler)
);
const stars = document.querySelectorAll('.rating .star');
stars.forEach(star => {
    star.addEventListener('mouseover', starSelection);
    star.addEventListener('mouseleave', starSelection);
    star.addEventListener('click', activeSelect);
});
function ratingHandler(e) {
    const childStars = e.target.children;
    for(let i = 0; i < childStars.length; i++) {
        const star = childStars.item(i)
        if (star.dataset.checked === "true") {
            star.classList.add('hover');
        }
        else {
            star.classList.remove('hover');
        }
    }
}

function starSelection(e) {
    const parent = e.target.parentElement
    const childStars = parent.children;
    const dataset = e.target.dataset;
    const note = +dataset.note; // Convert note (string) to note (number)
    for (let i = 0; i < childStars.length; i++) {
        const star = childStars.item(i)
        if (+star.dataset.note > note) {
            star.classList.remove('hover');
        } else {
            star.classList.add('hover');
        }
    }
}
function activeSelect(e) {
    const parent = e.target.parentElement
    const childStars = parent.children;
    const dataset = e.target.dataset;
    const note = +dataset.note; // Convert note (string) to note (number)
    for (let i = 0; i < childStars.length; i++) {
        const star = childStars.item(i)
        if (+star.dataset.note > note) {
            star.classList.remove('hover');
            star.dataset.checked = "false";
        } else {
            star.classList.add('hover');
            star.dataset.checked = "true";
        }
    }
    const noteTextElement = parent.parentElement.lastElementChild.children.item(0)
    noteTextElement.innerText = `Note: ${note}`;
    console.log(note);
    let url = `/coach/editRating/${coach_id}/${note}`
    window.location.href = url
    console.log(url)
}

Answer 1

嗨@Moudhaffer Bouallegui - 请找到示例星级评分页面。

 document.querySelectorAll("i.fa-star").forEach(function(element,position){ element.addEventListener("click",function(){ this.style.color = "yellow"; // this.style.fontSize = "35px"; let noOfStar = this.parentNode.parentNode.querySelector("input[name=star]").value; document.querySelectorAll("i.fa-star").forEach(function(e,p){ e.style.color = "rgb(126, 126, 126)"; if((p+1) <= noOfStar){ e.style.color = "yellow"; } }) }) })

 input[type=radio]{ display: none; }.card{ max-width: 350px; text-align: center; margin: auto; box-shadow: 0 0 15px 0 #000; padding: 15px; background-color: #000; color: #fff; cursor: pointer; }.fa-star{ font-size: 30px; color: rgb(126, 126, 126); transition: 0.1s ease-in-out all; }.stars{ padding:10px; height: 40px; } button{ width: 70%; outline: none; border: none; background-color: rgb(107, 107, 107); padding:10px; color: #fff; border-radius: 0; } button:hover{ box-shadow: 0 0 30px 0 yellow; border: 1px solid #fff; }.fa-star{ cursor: pointer; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="card"> <h2>Give your stars</h2> <div class="stars"> <span><label><i for="star1" class="fa fa-star"></i></label><input type="radio" name="star" id="star1" value="1"></span> <span><label><i for="star2" class="fa fa-star"></i></label><input type="radio" name="star" id="star2" value="2"></span> <span><label><i for="star3" class="fa fa-star"></i></label><input type="radio" name="star" id="star3" value="3"></span> <span><label><i for="star4" class="fa fa-star"></i></label><input type="radio" name="star" id="star4" value="4"></span> <span><label><i for="star5" class="fa fa-star"></i></label><input type="radio" name="star" id="star5" value="5"></span> </div> </div>