如何根据 class 名称循环遍历元素来引用元素的 ID
How to reference an element's id based on looping through elements by class name
我有一个 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。
如果 class 名称始终相同,则此方法有效
var info = document.getElementsByClassName('class-name');
for (i = 0; i <info.length; i++){
console.log(info[i].id);
}
快上班了,
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);
以下内容应该有所帮助:
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 对象,它在一堆基于 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。
如果 class 名称始终相同,则此方法有效
var info = document.getElementsByClassName('class-name');
for (i = 0; i <info.length; i++){
console.log(info[i].id);
}
快上班了,
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);
以下内容应该有所帮助:
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