有没有一种方法可以在使用 javascript 循环进行迭代时为每个 html 元素调用一个函数答案

【问题标题】：Is there a way I can call a function for each html element when iterated using javascript loops有没有一种方法可以在使用 javascript 循环进行迭代时为每个 html 元素调用一个函数
【发布时间】：2020-06-30 08:09:45
【问题描述】：

我有使用 javascript 循环迭代的 HTML 元素

html 是这样的

<div class="description">Item 1</div>
<div class="description">Item 2</div>
<div class="description">Item 2</div>

Javascript

let allItems =  document.querySelectorAll(".description")
  for (let i = 0; i <= allItems.length; i++) {
      allItems[i].addEventListener("click", toggleSpinner.bind(this));
     }

toggleSpinner = () => {
        alert("I clicked") // here should be, for example, "I clicked Item 1,
                           // Or Item 2 or Item 3 depending on which was clicked
      },

每个元素被点击时如何独立调用函数

【问题讨论】：

标签： javascript html loops ecmascript-6 getelementbyid

【解决方案1】：

你可以用这样的东西吗？

toggleSpinner = (data) => {
  console.log(`You clicked item ${data}`) // here should be, for example, "I clicked Item 1,
  // Or Item 2 or Item 3 depending on which was clicked
}


let allItems =  document.querySelectorAll(".description")
for (let i = 0; i < allItems.length; i++) {
	allItems[i].addEventListener("click", toggleSpinner.bind(this, allItems[i].dataset.item));
}

<div class="description" data-item="1">Item 1</div>
<div class="description" data-item="2">Item 2</div>
<div class="description" data-item="3">Item 3</div>

【讨论】：

【解决方案2】：

让 allItems = document.querySelectorAll(".description") for (让 i = 0; i {toggleSpinner(allItems[i].innerHTML)}); }

toggleSpinner = 内容 => { 警报(I clicked ${content}) },

类似的东西。向函数添加参数，并在循环中定义要添加的内容作为此内容

【讨论】：

【解决方案3】：

你看起来像这样吗？

$(document).ready(function(){

  $('div > *').click(function(){
    alert('hi');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>
  <p> This is a paragraph </p>
  <section> This is a section </section>
  <span> This is a span </span>
  <article> This is an article </article>

</div>

【讨论】：

并非如此。每个元素都应该附加事件侦听器，当单击元素时，它会独立调用一个函数。就像在它自己的例子中一样。我也希望它不依赖于 jquery

【解决方案4】：

document.getElementById("getClickedElement").addEventListener("click", function(event) {
  console.log("Clicked element is:- ", event.target.innerHTML);
});

<div id="getClickedElement">
  <div class="description">Item 1</div>
  <div class="description">Item 2</div>
  <div class="description">Item 3</div>
</div>

注意：- 只需将所有元素包装在父 div 中，并将 addEventListener 与该元素绑定即可。您将获得目标元素数据。

【讨论】：