时间戳

首页 > 解决方案 > 循环遍历 div 并给它们 id 然后使它们可点击

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

问题描述

我试图让我的循环中的多个 div 在被点击时显示有自己独特的消息。但我无法让代码工作。我想做的是... div1 = hello im div1，div2 = hello im 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>

标签： javascriptjquery

解决方案

您不需要 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>

推荐阅读