Question

我有使用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
      },

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

Answer 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>

Answer 2

让allItems = document.querySelectorAll（“。description”） for（让i = 0; i <= allItems.length; i ++）{ allItems [i] .addEventListener（“ click”，（）=> {toggleSpinner（allItems [i] .innerHTML）}）;; }

toggleSpinner = content => { 警报（I clicked ${content} }

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

Answer 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>

Answer 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。您将获得目标元素数据。

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

4 个答案: