在同一個div內獲取價值

Question

我閱讀了這個主題（和其他一些主題）：

獲得同一個div中的同級值

但是仍然沒有給我一個遮陽篷。

我有2個具有相同名稱的div（由循環創建）。 當觸發onClick ，我想將idUser的值傳遞給getNumber()函數，然后在p標簽上顯示idUser

HTML：

<div id="telephoneButton">
    <input type="hidden" value="1" id="idUser">
    <input type="button" value="Show Number" onClick="
    getNumber(idUser.value);">              
    <p id="number"></p>
</div>

<div id="telephoneButton">
    <input type="hidden" value="2" id="idUser">
    <input type="button" value="Show Number" onClick="
    getNumber(idUser.value);">
    <p id="number"></p>
</div>

JavaScript：

function getNumber(idUser)
{
    document.getElementById("number").innerHTML = idUser;
}

我知道這行不通，因為所有內容都具有相同的ID，因此腳本將顯示錯誤（或者可能在第一個div上顯示結果）。 我的問題是，我可以通過按鈕的父親DIV並使用子級獲取腳本上所需的所有數據嗎？ 如果是，怎么辦？

我將不勝感激任何幫助。

Answer 1

“我有2個同名的div”

停在那兒！

沒有兩個元素應該具有相同的ID。 您應該調整生成這些元素的循環，以便使用唯一的id值來生成它們。

現在，您可以通過收集兩個div元素然后在其中進行挖掘來完成此工作，如下所示：

 window.addEventListener("DOMContentLoaded", function(){ // Assuming, of course that these are the only div elements on the page. // The selector here could be modified to be hierarchical, but you didn't // provide enough HTML to see that. var theDivs = document.querySelectorAll("div"); // Loop through the div elements (no matter how many) for(var i = 0; i < theDivs.length; ++i){ // Create an Immediately Invoked Function Expression (IIFE) that passes itself // a COPY of the looping variable (i) so that each click callback will get its // own different value for it. (function(counter){ // Wire up the button that is in the current div to a click event callback function theDivs[i].children[1].addEventListener("click", function() { // Call the getNumber function and pass it the data it needs and the right // paragraph to write that data into. getNumber(theDivs[counter].children[0].value, theDivs[counter].children[2]); }); }(i)); } function getNumber(idUser, element){ element.innerHTML = idUser; } }); 

 <div id="telephoneButton"> <input type="hidden" value="1" id="idUser"> <input type="button" value="Show Number"> <p id="number"></p> </div> <div id="telephoneButton"> <input type="hidden" value="2" id="idUser"> <input type="button" value="Show Number"> <p id="number"></p> </div> <div id="telephoneButton"> <input type="hidden" value="3" id="idUser"> <input type="button" value="Show Number"> <p id="number"></p> </div> <div id="telephoneButton"> <input type="hidden" value="4" id="idUser"> <input type="button" value="Show Number"> <p id="number"></p> </div> <div id="telephoneButton"> <input type="hidden" value="5" id="idUser"> <input type="button" value="Show Number"> <p id="number"></p> </div> 

但是，實際上，這是一個hack。 您應該為所有重要的HTML元素賦予唯一的id值，或將其分配給CSS類，以便以后可以唯一地標識它們。

另外，請勿使用內聯HTML事件處理程序（ ... onclick="" ），因為它們會創建意大利面條代碼並在onXyz屬性值周圍創建全局函數包裝程序，該屬性值會修改回調函數的this綁定。 此外，它們不允許每個事件使用多個事件處理程序。 而是使用element.addEventListener()的W3C DOM事件模型標准。

Answer 2

這樣的事情應該可以解決您的問題，但是正如其他人一直在說的那樣，您應該使用名稱和類之類的東西來獲取DOM中的多個變量。 這是壞男孩解決方案，但您需要將兩者都更改為：

        var allElem = document.getElementsByTagName('telephoneButton');
        for (var i=0, max=allElem.length; i < max; i++) {
          alert(allElem[i].p.innerHTML);
        }

Answer 3

如您所知，具有相同ID的元素確實很糟糕。 但是無論如何，這段代碼是可行的：

<div id="telephoneButton">
    <input type="hidden" value="1" id="idUser" />
    <input type="button" value="Show Number" onClick="getNumber(this);" />              
    <p id="number"></p>
</div>

<div id="telephoneButton">
    <input type="hidden" value="2" id="idUser" />
    <input type="button" value="Show Number" onClick=" getNumber(this);" />
    <p id="number"></p>
</div>

和JS：

var getNumber = function(elem) {
    var num = elem.parentElement.children[0].value;
    elem.parentElement.children[2].innerHTML = num;
}

參見小提琴： https ： //jsfiddle.net/ugobsr79/2/

---

如果要同時顯示所有數字，請使用此JS：

var getNumber = function(elem) {
    var idUsers = document.querySelectorAll('input[id="idUser"]');
    for (var i = 0; i < idUsers.length; i++) {
        var num = idUsers[i].value;
        idUsers[i].parentElement.children[2].innerHTML = num;
    }
}

在這里提琴： https : //jsfiddle.net/ugobsr79/3/