Есть ли способ, которым я могу вызвать функцию для каждого элемента html при повторении с использованием циклов javascript - PullRequest
Новая
       10

Есть ли способ, которым я могу вызвать функцию для каждого элемента html при повторении с использованием циклов javascript

2 голосов
/ 19 марта 2020

У меня есть HTML элементы, повторяемые с использованием javascript l oop

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
      },

Как вызвать функцию независимо при нажатии на каждый элемент

Ответы [ 4 ]

1 голос
/ 19 марта 2020

Вы могли бы использовать что-то вроде этого, может быть? 

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>
1 голос
/ 19 марта 2020

let allItems = document.querySelectorAll (". Description") для (let i = 0; i <= allItems.length; i ++) {allItems [i] .addEventListener ("click", () => {toggleSpinner ( allItems [I] .inner HTML)}); }

toggleSpinner = content => {alert (I clicked ${content})},

Что-то в этом роде. Добавьте параметр в функцию и определите, что вы хотите добавить в качестве этого содержимого в l oop

0 голосов
/ 19 марта 2020 

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 & bind addEventListener с этим элементом. вы получите данные целевого элемента.

0 голосов
/ 19 марта 2020

Ты выглядишь примерно так? 

$(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>
...