在Javascript中迭代不同的div并将参数传递给脚本 背景

我正在使用PHP创建一个投票区列表。每个部分都是相同的，只是有一个唯一的数字，每次PHP循环时，这个数字都会增加

1

我使用PHP变量

$n

作为计数器，并将其放置在每个部分的

id

属性中的几个位置

当前PHP/HTML：

---

我应该将每个评级id都传递给脚本吗？还是有一种更简单的方法可以做到这一点，而我缺少了这种方法？

传递id是使用纯Javascript最简单的方法

function upvote(n) {
    document.getElementById('ratingup ' + n).style.display="block";
    document.getElementById('ratingdown ' + n).style.display="none";
}
function downvote(n) {
    document.getElementById('ratingup ' + n).style.display="none";
    document.getElementById('ratingdown ' + n).style.display="block";
}

不传递ID的一种方法是将类放在评级div上，然后传递

this

HTML:

---

您只能创建一个id为votesection_id的包装器，然后使用js/ajax执行所有其他操作

echo”“；
“回声”。
“回声”$拉廷古普。“\r\n”；
“回声”$降低比率。“\r\n”；
回显“\r\n”；
回声“；
回声“；

功能上表决（id）{
//1.使用ajax进入服务器完成您的工作2.返回当前的UPVOUTS 3.替换UPVOUTS h3文本
}
函数向下投票（id）{
//1.使用ajax进入服务器完成您的工作2.返回当前的否决票3.替换否决票h3文本
}

正如@idoteque在他们的评论中所说，元素ID中不允许有空格。将这些信息输入文档的最佳方法可能是使用

此外，不允许使用具有相同

id

的多个元素，在这种情况下，您可能需要的是

class

es。（我假设这段HTML将在每页重复多次。）

借用@Barmar将

这个
传递到事件处理程序的想法，下面是我如何更改服务器代码的：

echo "<div class='votesection' data-rating-id=" . $n . ">";
echo "<h3 class='rating' style='display:block;'>" . 
echo "<h3 class='ratingup' style='display:none;'>" . $ratingup . "</h3>\r\n";
echo "<h3 class='ratingdown' style='display:none;'>" . $ratingdown . "</h3>\r\n";
echo "<div class='arrow-down' onclick='downvote(this)'></div>\r\n";
echo "<div class='arrow-up' onclick='upvote(this)'></div>";
echo "</div>";

美元是多少？是id吗？你说的“将每个id添加到脚本中”是什么意思？id中不应该有空格，例如“等级34234”你应该有“描述\u id”“。我肯定你会出错的。更正，抱歉，空格格式错误。它应该是评级0、评级1、评级2等。由于每个votesection都有不同的编号，我假设要识别每个评级，最好给他们不同的ID。谢谢。澄清一下，parentNode就是votesection？这将仅更改该votesection中选定的分级，而不会更改页面上的其他votesection是否正确？是的，没错
parentNode
是包含此元素的DOM元素。将其用作
querySelector
的上下文，只会在该DIV中找到匹配的元素。
function upvote(n) {
    document.getElementById('ratingup ' + n).style.display="block";
    document.getElementById('ratingdown ' + n).style.display="none";
}
function downvote(n) {
    document.getElementById('ratingup ' + n).style.display="none";
    document.getElementById('ratingdown ' + n).style.display="block";
}

echo "<div id='votesection'>";
echo "<h3 id='rating " . $n . "' style='display:block;'>" . 
echo "<h3 class='ratingup' style='display:none;'>" . $ratingup . "</h3>\r\n";
echo "<h3 class='ratingdown' style='display:none;'>" . $ratingdown . "</h3>\r\n";
echo "<div class='arrow-down' onclick='downvote(this)'></div>\r\n";
echo "<div class='arrow-up' onclick='upvote(this)'></div>";

function upvote(self) {
    var parent = self.parentNode;
    parent.querySelector(".ratingup").style.display = "block";
    parent.querySelector(".ratingdown").style.display = "none";
}
function downvote(self) {
    var parent = self.parentNode;
    parent.querySelector(".ratingup").style.display = "none";
    parent.querySelector(".ratingdown").style.display = "block";
}

echo "<div class='votesection' data-rating-id=" . $n . ">";
echo "<h3 class='rating' style='display:block;'>" . 
echo "<h3 class='ratingup' style='display:none;'>" . $ratingup . "</h3>\r\n";
echo "<h3 class='ratingdown' style='display:none;'>" . $ratingdown . "</h3>\r\n";
echo "<div class='arrow-down' onclick='downvote(this)'></div>\r\n";
echo "<div class='arrow-up' onclick='upvote(this)'></div>";
echo "</div>";

function upvote(self) {
    var parent = self.parentNode;
    parent.querySelector(".ratingup").style.display = "block";
    parent.querySelector(".ratingdown").style.display = "none";
    var id = parent.dataset.ratingId;
    // do your AJAX or whatever with id
}
function downvote(self) {
    var parent = self.parentNode;
    parent.querySelector(".ratingup").style.display = "none";
    parent.querySelector(".ratingdown").style.display = "block";
    var id = parent.dataset.ratingId;
    // do your AJAX or whatever with id
}