Javascript 如何引用元素'；s id基于按类名循环元素

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

HTML

元素1
要素2
要素3

Javascript

window.onload=function（）{
object.eListener（）；
}
变量对象={
信息：document.getElementsByClassName（'class-name'），
eListener:函数（）{
var className=this.info；
对于（var i=0；i

单击带有事件侦听器的div时，console正在记录

未定义的
。我尝试只记录元素而不引用id，并将所有
className
变量替换为
document.getElementByClassName
，但这似乎也不起作用

如何打印具有类
类名的元素ID
？请提前注意，我不会为此使用jQuery。
如果类名始终相同，那么这就行了

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

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

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

}

var info=document.getElementsByClassName（'class-name'）；
对于（i=0；i它即将工作

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

for（var i=0，len=className.length；i
以下内容应该会有所帮助：

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>

元素1
要素2
要素3

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

window.onload=function（）{
object.eListener（）；
}
变量对象={
信息：document.getElementsByClassName（'class-name'），
eListener:函数（）{
var className=this.info；
对于（var i=0；i

示例
console.log（this.id）；
在处理程序中。您显示的代码可能重复，这是“循环中的处理程序”的经典示例问题对变量使用
var
时，这里不需要该问题的典型答案，因为您似乎想要绑定元素。因此，更合适的解决方案是使用
this
，而不是尝试使用您关闭的
i
获取元素。更好的副本是询问如何引用的副本处理程序中的绑定元素…和
document.getElementsByCassName[i]
都是错误的。您可能试图执行
console.log（className[i]）
。工作正常！非常简单，我想我已经尝试过了（没有双关语）。
<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>

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