Question

以下是p标记，这些标记会在页面加载时自动填充多个选项。

<div  id="bunchOfChoices" class="choices">
            {% for user in users %}
            <p id="searchOpts" class="searchOpts">{{user.username}}</p>
            {% endfor %}</div>


<script>
var opts = document.getElementById('searchOpts');
opts.onclick = function(event) {
var target = event.target || event.srcElement;

the_user = target.innerHTML;
href= "/../users/"+String(the_user);
window.location=href;

};
</script>

此代码似乎仅获得第一个“ searchOpt”。另外，我知道我可以使用<a>标签代替此方法。

Answer 1

ID对于一个元素应该是唯一的。如果您需要将多个具有相同名称的p进行分类，则可以使用class，然后使用以下一个：

document.getElementsByClassName("searchOpts");

演示：

console.log(document.getElementsByClassName('searchOpts')[1]);

<p id="searchOpts1" class="searchOpts">Name 1</p>
<p id="searchOpts2" class="searchOpts">Name 2</p>

Answer 2

这里有几件事：

滥用id

您should never在页面上具有多个具有相同id的元素。您应该使用class并保留id。

分配onclick处理程序：

您可以使用这些类来分配onclick处理程序，如下所示：

<script>
    for (let opt of Array.from(document.getElementsByClassName("searchOpts"))) {
        opt.onclick = () => {
            window.location.href = "/../users/" + opt.textContent;
        }
    };
</script>

Answer 3

HTML页面上只能有一个标记有任何特定id的元素。在这里，您将所有<p>元素标记为ID searchOpts。这是不正确的。

最好删除id并仅使用class。然后搜索该类的所有元素：

var allSearchOpts = document.querySelectorAll(".searchOpts");

这将返回一个元素列表，因此您需要遍历该列表以在每个元素上设置点击处理程序。

allSearchOpts.forEach( function(el) {
     el.onclick = ...
} );

Answer 4

您正在使用document.getElementById，它将获得具有此ID的第一项。使用ID时，ID名称必须唯一。

如果您需要为多个元素添加事件，请使用queryselectorall并为每个项目添加事件。

选中此answer

Answer 5

尝试使用jQuery，您可以使用

获得下一个p

$(this).next("p");

在您的onclick函数中。

使用JavaScript获取最近的<p>标签文本

5 个答案: