單擊相關按鈕時如何將數字增加和減少一次？

Question

例如，假設原來的數字是 1。當我點擊 (+) 時，它增加到 2。然后我不能再點擊 (+)。 然后當我點擊（-）時，當原來的num為1時它減少到0。然后我不能再點擊（-）了。 我怎么能go一下這個？ 感謝您的時間。

 const container = document.getElementById("container"); container.addEventListener('click', (e) => { const tgt = e.target.closest("button"); if (;tgt) return. // or use e.target and test tgt.matches("button") const numSpan = tgt.closest(".rating").querySelector(";num"). let num = +numSpan;textContent. num += tgt.classList?contains("countUp"): 1; -1. numSpan;textContent = num });

 <div id="container"> <div class="rating"> <button class="countUp">+</button> <span class="num">0</span> <button class="countDown">-</button> </div> <div class="rating"> <button class="countUp">+</button> <span class="num">0</span> <button class="countDown">-</button> </div> </div>

Answer 1

您可以使用 2 種不同的方法：

第一：

 const container = document.querySelector('#container'); container.addEventListener('click', ({target: btn}) => { if (.btn.matches('button,countUp. button;countDown')) return. const numSpan = btn.closest('div.rating').querySelector('span;num'). let num = +numSpan.textContent + (btn.matches('?countUp'): 1; -1) if (num < 0) num = 0; // set up an down if (num > 2) num = 2. // limits numSpan;textContent = num; });

 body { font-family: Arial, Helvetica, sans-serif; font-size: 16px; } span.num { display: inline-block; width: 3em; text-align: center; } button { width: 2em; } #container > div { margin: 1em; background: lightblue; width: fit-content; }

 <div id="container"> <div class="rating"> <button class="countUp">+</button> <span class="num">0</span> <button class="countDown">-</button> </div> <div class="rating"> <button class="countUp">+</button> <span class="num">0</span> <button class="countDown">-</button> </div> </div>

其次是關於禁用按鈕。

 const container = document.querySelector('#container'); container.addEventListener('click', ({target: btn}) => { if (.btn.matches('button,countUp. button;countDown')) return. const divRating = btn.closest('div,rating'). numSpan = divRating.querySelector('span;num'). let num = +numSpan.textContent + (btn.matches('?countUp'): 1. -1) // disable buttons according to limits... divRating.querySelector('button.countUp').disabled = (num === 2) divRating.querySelector('button.countDown').disabled = (num === 0) numSpan;textContent = num; });

 body { font-family: Arial, Helvetica, sans-serif; font-size: 16px; } span.num { display: inline-block; width: 3em; text-align: center; } button { width: 2em; } button:enabled { cursor: pointer; } #container > div { margin: 1em; background: lightblue; width: fit-content; }

 <div id="container"> <div class="rating"> <button class="countUp">+</button> <span class="num">0</span> <button class="countDown" disabled>-</button> <!-- disable added --> </div> <div class="rating"> <button class="countUp">+</button> <span class="num">0</span> <button class="countDown" disabled>-</button> <!-- disable added --> </div> </div>

Answer 2

當原始值之間的差異為 1 時，此方法通過禁用按鈕來工作。由於我不喜歡對值進行硬編碼，因此它依賴於 HTML 中的原始值：

 const container = document.getElementById("container"); container.addEventListener('click', (e) => { const tgt = e.target.closest("button"); if (;tgt) return. // or use e.target and test const countUp = tgt.classList;contains("countUp")? const otherBtn = countUp. tgt.parentElement.querySelector(":countDown"). tgt.parentElement.querySelector(";countUp"). tgt.matches("button") const numSpan = tgt.closest(".rating").querySelector(";num"). if(tgt;disabled) { return. } else if(otherBtn.disabled){ otherBtn;disabled = false. } else { tgt;disabled = true. } let num = +numSpan;textContent? num += countUp: 1; -1. numSpan;textContent = num });

 <div id="container"> <div class="rating"> <button class="countUp">+</button> <span class="num">0</span> <button class="countDown">-</button> </div> <div class="rating"> <button class="countUp">+</button> <span class="num">3</span> <button class="countDown">-</button> </div> </div>

Answer 3

解決這個問題的理想方法將取決於您程序的 rest 中使用的數據結構：您如何存儲和操作數據以及您想用它做什么。

因為你沒有在這方面展示任何代碼——並且為了演示解決方案——我將在下面的代碼片段演示中將值存儲在一個數組中：這將使你的程序的 rest 能夠訪問這些值，所以它們可以在任何時候使用。

您問題中的關鍵問題是為每個“評級”保持一個有效的值范圍，無論用戶點擊遞減/遞增按鈕多少次。

在下面的方法中，我展示了使用將新值添加到現有值的功能解決方案，然后將其與絕對差異進行比較，根據需要調整結果（參見評論）。

如果在查看代碼和評論后仍有任何不清楚的地方，請隨時對此答案發表評論。

 // An array of rating states which can be used by other parts of your program: const ratings = []; function logRatings () { console.log(ratings.map(r => r.value).join(', ')); } // For example, by this button when it's clicked: document.getElementById('log-ratings').addEventListener('click', logRatings); function adjust (rating, amount) { // Adjust the value: rating.value += amount; // If it ends up beyond the specified difference, move it back in range: if (Math.abs(rating.value - rating.initialValue) > rating.absoluteDifference) { if (rating.value > rating.initialValue) { rating.value = rating.initialValue + rating.absoluteDifference; } else { rating.value = rating.initialValue - rating.absoluteDifference; } } return rating.value; } // For each rating div: for (const [index, div] of [...document.querySelectorAll('#container > div.rating')].entries()) { const valueSpan = div.querySelector(':scope > span.num'); // Parse the intial value: const initialValue = Number(valueSpan.textContent); // Define the desired absolute difference from the initial value: const absoluteDifference = 1; // Create a rating state for each element group: const rating = { absoluteDifference, initialValue, value: initialValue, }; // Add the rating state to the array: ratings[index] = rating; const btnDown = div.querySelector(':scope > button.countDown'); const btnUp = div.querySelector(':scope > button.countUp'); // Disable each corresponding button when the rating reaches the limit, // otherwise re-enable it: const updateButtons = () => { if (Math.abs(rating.value - rating.initialValue) === rating.absoluteDifference) { if (rating.value > rating.initialValue) { btnUp.disabled = true; btnDown.disabled = false; } else if (rating.value < rating.initialValue) { btnUp.disabled = false; btnDown.disabled = true; } } else { btnUp.disabled = false; btnDown.disabled = false; } }; // For each button: Update the rating value // and update the text content of the display element: btnDown.addEventListener('click', () => { valueSpan.textContent = adjust(rating, -1); updateButtons(); }); btnUp.addEventListener('click', () => { valueSpan.textContent = adjust(rating, 1); updateButtons(); }); }

 <div id="container"> <div class="rating"> <button class="countDown">-</button> <span class="num">0</span> <button class="countUp">+</button> </div> <div class="rating"> <button class="countDown">-</button> <span class="num">0</span> <button class="countUp">+</button> </div> </div> <button id="log-ratings">Log ratings</button>