我有一个 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。
最佳答案
以下应该有所帮助:
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
关于javascript - 如何通过按类名遍历元素来引用元素的 id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39001292/