javascript - 获取同一div内的值

Question

我阅读了这个主题(以及其他一些主题):

get value of sibling in same div

但还是没有给我遮阳篷。

我有 2 个同名的 div(由循环创建)。当 onClick 被触发时，我想将 idUser 的值传递给 getNumber() 函数，然后显示 idUser 在 p 标签

上

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”

STOP RIGHT THERE!

任何两个元素都不应该具有相同的 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>

但是，实际上，这是一个黑客行为。您应该为所有重要的 HTML 元素提供唯一的 id 值或将它们分配给 CSS 类，以便以后可以唯一地标识它们。

此外，不要使用内联 HTML 事件处理程序 (... onclick="")，因为它们会创建意大利面条式代码并围绕修改 的 onXyz 属性值创建全局函数包装器this 回调函数的绑定(bind)。此外，它们不允许每个事件有多个事件处理程序。相反，请使用 element.addEventListener() 的 W3C DOM 事件模型标准。