循环遍历div并给它们id，然后使它们可以点击

Question

我试图让循环中的多个div在单击时显示自己的唯一消息。但我无法使代码工作。我想做的是。。。div1=你好我div1，div2=你好我div2。

div会显示在页面上，但我无法让点击消息正常工作。提前感谢您的任何帮助或建议：(

<script type="text/javascript">
var idcontainer = "";
var divs = "";
var clickcontent;
for (i = 1; i < 5; i++) {
divs += `<div class="divs" id="div${i}">Test${i}</div>`;
clickcontent += "Hello i am div" + i;
idcontainer += "#div" + i;
}
console.log(idcontainer);
$("#output").html(divs);
$(idcontainer).click(function(e) {
e.preventDefault();
alert(clickcontent);
});
</script>

Answer 1

您不需要id，只需将内容存储在数据attr中，然后点击显示如下

var idcontainer = '';
var divs = '';
var clickcontent
for(i=1;i < 5;i++){
clickcontent = 'Hello i am div' + i;
divs += `<div class="divs" id="div${i}" data-content="`+clickcontent+`">Test${i}</div>`;

idcontainer += '#div' + i;
}
// console.log(divs)
$("#output").html(divs);
$('.divs').click(function (e) { 

alert($(this).data('content'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="output"></div>

Answer 2

要选择多个div，需要用逗号分隔它们的id；现在idcontainer看起来像#div1#div2...，所以jquery不会产生任何元素(查看此内容以了解原因(。如果你将他们的id存储在一个数组中，比如：

var idcontainer = [];
var divs = '';
var clickcontent
for(i=1;i < 5;i++){
clickcontent = 'Hello i am div' + i;
divs += `<div class="divs" id="div${i}" data-content="`+clickcontent+`">Test${i}</div>`;
idcontainer.push('#div' + i);
}

然后像这样使用jquery：

$(idcontainer.join(', ')).click(function (e) { 
e.preventDefault();
alert(clickcontent)
});

这是可行的。

Answer 3

您可以使用以下代码动态生成div，并将其附加到您想要的任何标记上，这里我已经将其附加在了body标记上。

// Creating Divs and assign class by the name of "dynamicDiv"
for(i=1;i < 5;i++){
let div = document.createElement('div');
div.textContent = `I am div ${i}`;
div.className = 'dynamicDiv';
$("body").append(div);
}
// Attaching click event for each generated div by using class name
$('.dynamicDiv').on('click', function () {
alert($(this).text()); // Displaying the text of div
});