javascript - 如何唯一标识循环生成的列表元素(li)的HTML内容？

Question

我通过将一个列表元素放入 php 循环中自动生成一个无序列表，如下所示:

while($row = $result->fetch_assoc()) {
echo "<a href=\"ArticleViewPage.php\" class=\"list-group-item col-sm\">". $row["Header"]."</a> ";
} 

$conn->close();

假设表中有 10 行(表 xyz 包含 2 列:id、标题)，您可以从数据库中提取“id”和“标题”，其中标题在 html 页面中显示为列表，如下所示导航栏(或菜单)。

当有人点击列表元素之一并根据他们的选择执行一些代码时，我如何唯一地识别(查找 id)？

(例如:当有人单击其中一个列表项时，我需要能够将所选列表项的 id 发送到另一个 php 页面，并执行一些针对该特定 id/索引自定义的代码。)

注意:每个列表项的索引/id 无法手动输入，因为列表是使用循环生成的，该循环从数据库中提取标题以填充每个列表项，如上面所示。

请不要给出基于Jquery或其他框架的解决方案。请只提供简单简洁的 php 或 javascript 代码。

Answer 1

Javascript 解决方案:

您应该将点击事件附加到类list-group-item的每个元素，使用getElementsByClassName()，这将返回具有给定类名的所有对象的数组，以便您可以使用 for 循环遍历它们中的每个并将其与您想要在单击时触发的函数关联(在我的示例中，该函数称为 my_function)，请检查下面的示例:

function my_function() {
     //get the index of clicked li
};

var class_names= document.getElementsByClassName("list-group-item");

for (var i = 0; i < class_names.length; i++) {
    class_names[i].addEventListener('click', my_function, false);
}

我建议添加名为 index 的数据属性，就像评论中提到的 @dandavis 一样，您的代码将是:

$i=0;
while($row = $result->fetch_assoc()) {
    echo "<a data-index='".$i."' href='ArticleViewPage.php' class='list-group-item col-sm'>". $row["Header"]."</a> ";
    $i++;
} 

您可以使用 getAttribute() 获取函数中的索引:

function my_function() {
     var current_item_index = this.getAttribute('data-index');
};

希望这有帮助。