如何基于按类名循环遍历元素来引用元素'

How to reference an element's id based on looping through elements by class name

本文关键字：元素 引用 遍历 何基于 循环      更新时间：2023-09-26

我有一个javascript对象与事件监听器对一堆基于类名的元素。这些元素中的每一个都有一个id，我将在对象中的其他函数中使用它。现在，我要做的就是让id在控制台中打印出来。我无法访问这些id。我的代码结构如下:

HTML 

<div class="class-name" id="one"  >Element 1</div>
<div class="class-name" id="two"  >Element 2</div>
<div class="class-name" id="three">Element 3</div>
Javascript

window.onload = function() {
     object.eListener();
}
var object = {
    info : document.getElementsByClassName('class-name'),
    eListener : function() {
        var className = this.info;
        for (var i = 0; i < className.length; i++) {
            className[i].addEventListener('click', function() {
                console.log(document.getElementsByClassName[i].id);
            });
        }
    }
}

当单击事件侦听器的div时，控制台正在记录undefined。我试过在不引用id的情况下记录元素，并用document.getElementByClassName替换所有的className变量，但这似乎也不起作用。

我如何打印类class-name元素的id ?提前说明一下，我不会使用jQuery。

以下内容应该有所帮助:

<div class="class-name" id="one"  >Element 1</div>
<div class="class-name" id="two"  >Element 2</div>
<div class="class-name" id="three">Element 3</div>

JS 

window.onload = function() {
  object.eListener();
}
var object = {
    info : document.getElementsByClassName('class-name'),
    eListener : function() {
        var className = this.info;
        for (var i = 0; i < className.length; i++) {
            className[i].addEventListener('click', function() {
                console.log(this.id);
            });
        }
    }
}

例子小提琴

如果类名总是相同，则此操作有效

var info = document.getElementsByClassName('class-name');
for (i = 0; i <info.length; i++){
    console.log(info[i].id);
}

离公司很近，

console.log(this.id);

如果你想在这个范围内使用i，你可以创建/执行一个匿名函数，传递i作为参数。

for (var i = 0, len = className.length; i < len; i++) (function(i) {
    className[i].addEventListener('click', function() {
        console.log(className[i].id);
    });
})(i);
相关文章：