如何根据 class 名称循环遍历元素来引用元素的 ID

Question

我有一个 javascript 对象，它在一堆基于 class 名称的元素上有一个事件侦听器。这些元素中的每一个都有一个 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，并将所有 className 变量替换为 document.getElementByClassName，但这似乎也不起作用。

如何使用 class class-name 打印元素的 ID？请提前注意，我不会为此使用 jQuery。

Answer 1

如果 class 名称始终相同，则此方法有效

var info = document.getElementsByClassName('class-name');

for (i = 0; i <info.length; i++){

    console.log(info[i].id);

}

Answer 2

快上班了，

console.log(this.id);

如果您想在此范围内使用 i，您可以 create/execute 匿名函数将 i 作为参数传递。

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

Answer 3

以下内容应该有所帮助：

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>

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);
            });
        }
    }
}

示例FIDDLE

如何根据 class 名称循环遍历元素来引用元素的 ID

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

javascript

html

addeventlistener

console.log

getelementsbyclassname