如何在多個元素上運行相同的 function？

Question

我創建了一個 web 頁面，其中包含 3 個可以單獨觸發的計數器，但是我的計數 function 有問題，我無法在 3 個計數器上使用它。

我設法檢索了每個按鈕的索引，但我不知道如何使用它來分別觸發每個計數器。

你能幫我解決這個問題嗎？

這是我的代碼。

 "use strict"; /* ___________________________Déclarer les variables et les fonctions______________________________ */ /* Déclaration des variables */ var item = document.querySelectorAll('.slider-item'); var str = document.querySelectorAll('.buttons--start'); var stp = document.querySelectorAll('.button--stop'); var start = 0; var end = 0; var diff = 0; var timer = 0; /* Fonction chrono */ function chrono(){ end = new Date(); diff = end - start; diff = new Date(diff); var sec = diff.getSeconds(); item.innerHTML = sec; timer = setTimeout("chrono()", 10); } /* Fonction pour déclancher le chrono */ function chronoStart(i){ start = new Date(); chrono(); console.log('start '+i); } /* Fonction pour arrêter et rénitialiser le chrono */ function chronoStop(i){ clearTimeout(timer) item[i].innerHTML = "0"; start = new Date(); console.log('stop '+i); } /* Fonction qui change la couleur du background */ function changeColor(i){ let bgColor = '#' + Math.random().toString(16).substr(-6); item[i].style.backgroundColor = bgColor; } /* ___________________________Écouter les événements__________________________________ */ /* Appeler la fonction qui déclanche le chrono lorsqu'on clique sur start*/ for (let i=0; i<item.length; i++) { str[i].addEventListener('click',(e)=>{ chronoStart(i); }); //currentPos = i; } /* Appeler la fonction qui arrête le chrono lorsqu'on clique sur stop*/ for (let i=0; i<item.length; i++) { stp[i].addEventListener('click',(e)=>{ chronoStop(i); }); } /* Appeler la fonction qui change la couleur du background lorsque l'évenement est déclancher*/ for (let i=0; i<item.length; i++) { item[i].addEventListener("click",(e)=>{ changeColor(i); }); }

 body { font-family: Arial, sans-serif; }.wrapper { /* display: flex; flex-flow: column wrap; position: fixed; left: 0; right: 0; top: 0; bottom: 0; padding: 50px; */ }.slider { display: flex; align-items: center; justify-content: center; flex-grow: 1; }.slider-item { font-size: 120px; font-weight: bold; padding: 15px; background-color: yellow; user-select: none; }.buttons { margin-top: 15px; text-align: center; }.buttons button { display: inline-block; padding: 15px; font-size: 16px; color: #fff; border: none; outline: none; background-color: #000; cursor: pointer; }

 <div class="wrapper "> <div class="slider"> <div class="slider-item">0</div> </div> <div class="buttons"> <button class="buttons--start" type="button">Start</button> <button class="button--stop" type="button">Stop</button> </div> </div> <div class="wrapper"> <div class="slider"> <div class="slider-item">0</div> </div> <div class="buttons"> <button class="buttons--start" type="button">Start</button> <button class="button--stop" type="button">Stop</button> </div> </div> <div class="wrapper"> <div class="slider"> <div class="slider-item">0</div> </div> <div class="buttons"> <button class="buttons--start" type="button">Start</button> <button class="button--stop" type="button">Stop</button> </div> </div>

Answer 1

問題是因為您有多個相同重復 HTML 內容的實例，但在您的邏輯中，當事件發生時您沒有保留對正確元素的相關引用。

實現此目的的一種更簡單的方法是遍歷包含元素並找到相關的子元素以將事件處理程序綁定到或更新其內容。

這個邏輯的簡單版本是這樣的：

 "use strict"; document.querySelectorAll('.chrono-wrapper').forEach(el => { const container = el; const item = el.querySelector('.slider-item'); const str = el.querySelector('.buttons--start'); const stp = el.querySelector('.button--stop'); var start = 0; var end = 0; var diff = 0; var timer = 0; function chrono() { end = new Date(); diff = end - start; diff = new Date(diff); var sec = diff.getSeconds(); item.innerHTML = sec; timer = setTimeout(chrono, 10); } function chronoStart() { start = new Date(); chrono(); } function chronoStop() { clearTimeout(timer) item.innerHTML = "0"; start = new Date(); } function changeColor(i) { let bgColor = '#' + Math.random().toString(16).substr(-6); item.style.backgroundColor = bgColor; } str.addEventListener('click', chronoStart); stp.addEventListener('click', chronoStop); });

 body { font-family: Arial, sans-serif; }.chrono-wrapper { /* display: flex; flex-flow: column wrap; position: fixed; left: 0; right: 0; top: 0; bottom: 0; padding: 50px; */ }.slider { display: flex; align-items: center; justify-content: center; flex-grow: 1; }.slider-item { font-size: 120px; font-weight: bold; padding: 15px; background-color: yellow; user-select: none; }.buttons { margin-top: 15px; text-align: center; }.buttons button { display: inline-block; padding: 15px; font-size: 16px; color: #fff; border: none; outline: none; background-color: #000; cursor: pointer; }

 <div class="chrono-wrapper"> <div class="slider"> <div class="slider-item">0</div> </div> <div class="buttons"> <button class="buttons--start" type="button">Start</button> <button class="button--stop" type="button">Stop</button> </div> </div> <div class="chrono-wrapper"> <div class="slider"> <div class="slider-item">0</div> </div> <div class="buttons"> <button class="buttons--start" type="button">Start</button> <button class="button--stop" type="button">Stop</button> </div> </div> <div class="chrono-wrapper"> <div class="slider"> <div class="slider-item">0</div> </div> <div class="buttons"> <button class="buttons--start" type="button">Start</button> <button class="button--stop" type="button">Stop</button> </div> </div>

Answer 2

正如Rory 在我塗鴉時指出的那樣，您重復了標記，但只有一組變量跟蹤計時器。

您可以通過遍歷 HTML 中出現的事件並為每個事件設置不同的處理程序來解決此問題。 這是您可以這樣做的一種方法：

 "use strict"; function init() { // get elements whose id begins with "slider-" const sliders = document.querySelectorAll('[id^=slider-]'); // set up event listeners for each occurrence: sliders.forEach(s => { // the setInterval/timeout identifier for this instance let timerId; // get references to the child elements we need const startButton = s.querySelector('.buttons--start'); const stopButton = s.querySelector('.button--stop'); const display = s.querySelector('.slider-item'); // add a start button click listener startButton.addEventListener('click', () => { // clear existing timer if already running clearTimeout(timerId); // capture the start time const start = new Date(); // function to update the display const update = () => { display.innerHTML = ((Date.now() - start) / 1000).toFixed(1); } // start a timer, update the timerId variable timerId = setInterval(update, 100) // add a listener for the stop button to kill this timer const stopHandler = () => clearInterval(timerId); stopButton.addEventListener('click', () => { stopHandler(); // only needs to run once; remove the listener stopButton.removeEventListener('click', stopHandler); }); }); }); } // kick it off init();

 body { font-family: Arial, sans-serif; }.wrapper { /* display: flex; flex-flow: column wrap; position: fixed; left: 0; right: 0; top: 0; bottom: 0; padding: 50px; */ }.slider { display: flex; align-items: center; justify-content: center; flex-grow: 1; }.slider-item { font-size: 120px; font-weight: bold; padding: 15px; background-color: yellow; user-select: none; }.buttons { margin-top: 15px; text-align: center; }.buttons button { display: inline-block; padding: 15px; font-size: 16px; color: #fff; border: none; outline: none; background-color: #000; cursor: pointer; }

 <div class="wrapper" id="slider-1"> <div class="slider"> <div class="slider-item">0</div> </div> <div class="buttons"> <button class="buttons--start" type="button">Start</button> <button class="button--stop" type="button">Stop</button> </div> </div> <div class="wrapper" id="slider-2"> <div class="slider"> <div class="slider-item">0</div> </div> <div class="buttons"> <button class="buttons--start" type="button">Start</button> <button class="button--stop" type="button">Stop</button> </div> </div> <div class="wrapper" id="slider-3"> <div class="slider"> <div class="slider-item">0</div> </div> <div class="buttons"> <button class="buttons--start" type="button">Start</button> <button class="button--stop" type="button">Stop</button> </div> </div>