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

Question

所以，我已经研究了很多，但没有找到一个适合我的需求或解决我的问题的答案。

我有一块html<div>,<span>,<i>和<input>，我用for循环生成多次(生成的量对应于我在数据库中的表中有多少行)。

自然地，它们都有相同的类。现在我想要一个特定的值，它与相应的<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的值没有定义。我可能做错了什么

2日编辑! !

基本上，我有这些代表星星，一旦你点击一个你会得到你点击的星星的值。我对星星的价值没有意见。我想要得到的值是和。这样做的原因是因为我有多个块，他们都有相同的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-"rating"中某项的具体值?">

最简单的方法是编写带有id和类的序列。例如,

<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循环生成列表，因此可以动态地为每个元素分配唯一的类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.
}