離得最近 <p> 使用JavaScript標記文本

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濫用

頁面上永遠不應有多個具有相同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 5

嘗試使用jQuery，您可以通過使用獲得下一個p

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

在您的onclick函數中。