Question

我读过这个主题（和其他一些主题）：

但仍然没有给我一个太棒了。

我有2个具有相同名称的div（由循环创建）。触发onClick后，我想将 idUser 的值传递给getNumber()函数，然后在{{1}上显示 idUser 标签

HTML：

JavaScript的：

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

我知道这不会起作用，因为所有内容都有相同的ID，因此脚本会显示错误（或者可能会在第一个div上显示结果）。我的问题是，我可以通过按钮的父DIV并使用孩子获取我需要的所有数据吗？如果有，怎么样？

我非常感谢任何帮助。

Answer 1

“我有两个同名的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>

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

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

Answer 2

这样的事情可以解决你的问题，但正如其他人所说的那样，你应该使用名称和类之类的东西来获取DOM中的多个变量。这是badboy解决方案，但您需要将两者都更改为：

        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/

在同一个div中获取价值

3 个答案: