javascript - 如何通过按类名遍历元素来引用元素的 id

Question

我有一个 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，并将所有 className 变量替换为 document.getElementByClassName，但这似乎也不起作用。

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

Answer 1

以下应该有所帮助:

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