从具有相同 class 的输入列表中获取特定输入的值

Question

所以，我对此进行了很多调查，但无法真正找到适合我的需要或解决我的问题的答案。

我有一个 html <div>、<span>、<i> 和 <input> 块，我用 for 循环生成了多次（生成的数量对应于我在数据库中的 table 中有多少行）。

自然都是一样的class。现在我想要一个与其对应的 <i> 或 <span> 或 <div> 相关联的特定值，这意味着它基本上位于与我的数据库中的一行相对应的那个特定块中。

这是从 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 %}

下面是我如何在 js

中获取 <input> 的值

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

现在我在 url 中使用这个值，就像这样

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

但这将始终给我 <input> 和 coach_id = 1

的值

如何获取与特定 <span class="rating" data-rating="0"> 关联的特定值？

编辑！！！

所以使用@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 的值未定义。我可能做错了什么

第二次编辑！！！

所以，基本上我有这些代表星星的东西，一旦你点击一个，你就会得到你点击的星星的价值。我对明星的价值没有异议。我想获得与相同的 that's within that 的值。这样做的原因是因为我有多个块，它们在 html 中都具有相同的内容，但我从数据库中获取的值并不相同。所以每个都对应于我数据库中 table 中的一行。我需要访问特定值，因为它与我要在数据库中更新的评级相关。

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

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 和一个 class 来编写序列。例如，

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

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

也许是更好的方法，具体取决于我们的底层设计：假设这些项目在某种程度上是交互的，您可以为每个项目添加一个单独的 onclick 事件，这样无论发生什么动作，都会将 dom 元素传递给处理程序。

以下方法可能不适用于所有浏览器：

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

我自己从来没有做过那个，据说很慢。

最后，可能是最糟糕的方法，你可以迭代 class，像这样：

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

从具有相同 class 的输入列表中获取特定输入的值

Getting the value of a specific input from a list of inputs with the same class

javascript

html

ajax

twig