如何使循环中的div可点击答案

【问题标题】：How to make div in loop clickable如何使循环中的div可点击
【发布时间】：2021-09-21 11:01:58
【问题描述】：

我在 .JS 文件（我稍后在 HTML 文件上调用）上有以下函数：

function writeDiv(){
x = 1
myArray.forEach(item => {
    htmlText += '<div class="divsArray">';    
    htmlText += '<h5> Value of X: </h5>' + x;      
    htmlText += '</div>';  
    x++;
  });   
   $('body').append(htmlText); 
   }

这会为我的数组中的每个条目（在本例中为 14）写入一个 div，其值为 X。我想要做的是，每次我单击一个 div 时，它都会通过窗口警报向我显示已分配给它的 X 的值。我尝试了一些东西，但我无法让它工作，提前感谢您的帮助！

【问题讨论】：

如果您希望元素可点击，只需添加click event

标签： javascript jquery arrays loops

【解决方案1】：

function writeDiv() {

  var temp = [100,150,200,300,400,500];
  var innerHtml = "";
  temp.forEach((item, index)=> {
      innerHtml += `<div class="divsArray">`;    
      innerHtml += '<h5> Value of X: </h5><span>' + item +'</span>';      
      innerHtml += '</div>';  
    
    });   
   document.getElementsByTagName('body')[0].innerHTML = innerHtml; 
}
writeDiv();

$(function() {
  $('.divsArray').click(function() {
    let addMoreRoomClone = $(this).find('span').html();
    alert(addMoreRoomClone);
  });
});

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

由于您似乎使用 jQuery ($)，我建议您注册一个实时事件处理程序。

$(document)
  .on('click', '.divsArray', (event)=>{
    console.log(event);
    console.log(event.currentTarget.getAttribute('id'));
     
    // do further stuff here
  });

【讨论】：

【解决方案3】：

我不知道你是什么，但就是这样。如果你使用一些变量而不是索引，它将不起作用，因为当 setTimeout 函数起作用时，每次迭代的 x 的值都是相同的。如果您还有其他问题，请输入。

function writeDiv() {

  const myArray = [15,5,5];
  let htmlText = "";
  myArray.forEach((item, index)=> {
      htmlText += `<div id="${index}" class="divsArray">`;    
      htmlText += '<h5> Value of X: </h5>' + x;      
      htmlText += '</div>';  
    
      setTimeout(()=>{ 
          document
          .getElementById(index)
          .addEventListener("click",()=>{
          alert(index + 1);
      })},0)
    });   
   document.getElementsByTagName('body')[0].innerHTML = htmlText; 
}
writeDiv();

【讨论】：