如何使循环中的div可点击

Posted 2023-05-09

【中文标题】如何使循环中的div可点击

【英文标题】：How to make div in loop clickable

【发布时间】：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

【参考方案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);
  );
);

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

【参考方案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();