我创建了 3 个具有类属性的动态按钮,并希望在单击其中一个按钮时列出它们。仅显示其中之一而不是全部三个。
<script>
var hyperlink;
$(function() {
var y = 2;
for(var i = 0; i <= 2; i++ ) {
drawRow( i, y );
}
});
function drawRow( x, y ) {
if(x == 0)
row = $("<tr />")
else {
var btnName = "btn" + x;
console.log("ln62 btnName: " + btnName);
hyperlink = document.createElement("button");
hyperlink.setAttribute('id', btnName);
hyperlink.setAttribute('class', 'btnCL'); // class set for button
hyperlink.innerHTML = x;
$("#DataTable").append(row);
row.append($("<td></td>").append(hyperlink));
var btnName2 = "#btn" + x;
}
}
$(document).on("click", '.btnCL', function() {
console.log("inside doc.on ln73");
//console.log("hyperlink: " + hyperlink.getAttribute("id"));
$(hyperlink).each(function( i ) {
console.log("ln76 " + i + ": " + hyperlink.getAttribute("id"));
});
});
</script>
结果: ln62 btn名称:btn1 ln62 btn名称:btn2 ln62 btn名称:btn3
ln73 上的文档内部 ln76 0: btn3//仅列出一(1) 个? s/b 3
如有任何帮助,我们将不胜感激。
最佳答案
这是因为 hyperlink
是一个变量而不是数组。此行 hyperlink = document.createElement("button");
将始终更新 hyperlink
带有上次创建的按钮的变量。
您可以使用event
对象并获取目标,而不是使用each
var hyperlink;
$(function() {
var y = 2;
for (var i = 0; i <= 2; i++) {
drawRow(i, y);
}
});
function drawRow(x, y) {
if (x == 0)
row = $("<tr />")
else {
var btnName = "btn" + x;
console.log("ln62 btnName: " + btnName);
hyperlink = document.createElement("button");
hyperlink.setAttribute('id', btnName);
hyperlink.setAttribute('class', 'btnCL'); // class set for button
hyperlink.innerHTML = x;
$("#DataTable").append(row);
row.append($("<td></td>").append(hyperlink));
var btnName2 = "#btn" + x;
}
}
$(document).on("click", '.btnCL', function(e) {
console.log("inside doc.on ln73");
console.log(e.target.getAttribute("id"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="DataTable"></table>
关于javascript - jquery forEach 函数用于显示/列出动态元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58253395/