从具有同一类的输入列表中获取特定输入的值

Question

因此，我已经仔细研究了这一点，找不到适合我需求或解决我的问题的答案。

我有一个html ＆lt; div＆gt;，＆lt; span＆gt;，＆lt; i＆gt; and code> and ＆lt; /代码>我使用for循环生成多次（生成的数量对应于我的数据库中表中有多少行）。

自然，所有人都有同一班级。 现在，我想要一个与其对应的＆lt; i＆gt;或＆lt; span＆gt;或＆lt; div＆gt＆gt;相关的特定值基本上是在我的数据库中对应的一个特定块中。

这是从for循环中生成的块（它在树枝中，但我认为这没有任何相关性），

{% for coach in coaches %}
        <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>
{% endfor %}

这是我如何获得＆lt; input＆gt;在JS中的价值。

        const coach_id = document.querySelector('.coach-id').value;

现在，我在这样的URL中使用了此值

           let url = `/coach/editRating/${coach_id}/${note}`
            window.location.href = url
            console.log(url)

，但这总是会给我＆lt; input＆gt;带有coach_id = 1

我该怎么做才能获得特定值与特定的＆lt; span class =“ rating” data-rating =“ 0”＆gt;？

编辑！！！

因此，使用@blunt Jackson的答案，我尝试了以下内容

            var coach_ids = document.getElementsByClassName("coach-id");
            for (var i = 0; i < coach_ids.length; i++) {
                var val = coach_ids[i].getAttribute['data-note'];
                let url = `/coach/editRating/${val}/${note}`
                window.location.href = url
                console.log(url)
            }

，但Val的价值不确定。我可能在做错了

第二次编辑！！！

因此，基本上我有这些代表星星，一旦您单击一个，就会获得您单击的星星的值。我对恒星的价值没有问题。 我想获得与之相同的价值。原因是因为我有多个块，并且它们在HTML中都具有相同的内容，但是我从数据库中获得的值并不相同。因此，每个都将对应于我的数据库中表中的一行。我需要访问特定值，因为它与我试图在数据库中更新的额定值相关联。

负责星星并发布参数的脚本

const ratings = document.querySelectorAll('.rating');
        const session_id = document.querySelector('.session-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 = `/session/sessionRating/${session_id}/${note}`
            window.location.href = url
            console.log(url)

Answer 1

您的示例中有一些缺少的东西，但是我将解决一个基本问题：

“我该怎么做才能在Span-class-“评分”中获得项目的特定价值？”

简单的方法是用ID和类编写序列。例如，

    <div>
        <span></span>
        <span class="rating" data-rating="0">
            <i id="star1" class="star" data-checked="false" data-note="1">★</i>
            <i id="star2" class="star" data-checked="false" data-note="2">★</i>
            <i id="star3" class="star" data-checked="false" data-note="3">★</i>
            <i id="star4" class="star" data-checked="false" data-note="4">★</i>
            <i id="star5" class="star" data-checked="false" data-note="5">★</i>
        </span>
        <span>
            <input class="coach-id" hidden value="{{ coach.id }}">
        </span>
    </div>

由于您使用for循环来生成列表，因此您可以动态分配每个唯一的类ID，然后单独标识每个元素。

也许是一种更好的方法，具体取决于我们的基本设计：假设这些项目以某种方式交互式，则可以向每个项目添加一个单独的ONCLICK事件，以便发生的任何操作都将DOM元素传递给处理程序。

这是一种可能无法与所有浏览器一起使用的方法：

var element = document.querySelector('["data-note"="3"]');

我自己从未做过那个浏览器，有传言说这很慢。

最后，可能是最糟糕的方法，您可以像这样迭代班级：

var stars = document.getElementsByClassName("star");
for (var i = 0; i < stars.length; i++) {
    var val = stars[i].getAttribute['data-note'];
    // do something with val.
}