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

它即将开始工作，

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

Answer 2

如果类名始终相同，则可以使用

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

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

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

}

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

如何根据类名

3 个答案: