第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何將計數(shù)器添加到具有相同類的多個元素

如何將計數(shù)器添加到具有相同類的多個元素

大話西游666 2021-08-20 10:25:07
我正在嘗試重新創(chuàng)建 WoW 天賦計算器,如下所示 - https://classicdb.ch/?talent#h項目文件 - https://codepen.io/jjchrisdiehl/pen/gNQLgR這是一個幫助更好地理解 Javascript 的項目,因此請避免為此使用任何 jQuery 解決方法 - 謝謝。如果您查看 HTML 代碼,您會看到我將 HTML 設(shè)置為帶有“item”類的 div,然后我將另一個 div 嵌套在“item” div 內(nèi),帶有“points”類。<div class="item two nature_wispsplode button" data-max="5">   <div class="points"></div></div><div class="item three fire_fireball button" data-max="3">    <div class="points"></div></div>這個想法是將一個名為 logMouseButton 的 Javascript 事件偵聽器附加到每個具有“item”類的 div。這將偵聽單擊并記錄是鼠標(biāo)左鍵單擊還是右鍵單擊。/* Get item div element for addEventListener*/let itemButton = document.getElementsByClassName("item");/* Apply logMouseButton to every itemButton */for (var i = 0; i < itemButton.length; i++) {  itemButton[i].addEventListener("mouseup", logMouseButton, false);}現(xiàn)在 logMouseButton 代碼是從 Moz 頁面上的 MouseEvents .button 中竊取的。我的想法是使用開關(guān)來管理每個項目的單獨計數(shù)器的加減點。
查看完整描述

2 回答

?
弒天下

TA貢獻1818條經(jīng)驗 獲得超8個贊

一種方法是選擇.item元素,并創(chuàng)建一個array的.item長度(數(shù).item在頁面元素)單獨存儲用于每一個所述計數(shù)器。


這是一個演示,其中包含一些有用的評論:


/** selecting the elements with ".item" class and declaring an array to store each element counter separately **/

const items = document.querySelectorAll('.item'),

      countArr = new Array(items.length);


/** loop through the elements and add "mouseup" listener (to ensure catching both left and right clicks) for each element  **/

 

/** 

* el: the current element from the ".item" elements collection

* i: the index of that elemnt in the collection

**/


items.forEach((el, i) => {

  countArr[i] = 0; /** initialize each array element with 0 so we can count later (new Array puts "undefined" as the array elements values) **/

  

  /** add the "mouseup" listener **/

  el.addEventListener('mouseup', e => {

    let txtCount = el.querySelector('.count'); /** selecting the "span" that contains the counter from the current elemnt (don't forget that we're looping in ".item" elements collection) **/

    if(e.which === 1) countArr[i]++; /** left click **/

    else if(e.which === 3) countArr[i]--; /** right click **/

    txtCount.textContent = countArr[i]; /** update the "span" wih the calculated counter as left click adds 1 and right click removes 1 from the counter of each element **/

  });

});

/** basic styling for the demo **/


.item {

  display: inline-block;

  margin: 15px 0;

  padding: 8px;

  border: 2px solid teal;

  user-select: none;

}


.item .count {

  display: inline-block;

  background-color: #181818;

  color: #fff;

  font-size: 1.2rem;

  font-weight: bold;

  padding: 8px;

  border-radius: 4px;

}

<div class="item">counter = <span class="count">0</span></div>

<div class="item">counter = <span class="count">0</span></div>

<div class="item">counter = <span class="count">0</span></div>


查看完整回答
反對 回復(fù) 2021-08-20
?
慕神8447489

TA貢獻1780條經(jīng)驗 獲得超1個贊

您需要訪問與單擊的元素對應(yīng)的 div。

Usingdocument.querySelector(".item .points")將始終選擇 DOM 中的第一個元素。

您可以使用e.target訪問被單擊的元素,并且由于您需要的是該元素的唯一子元素,因此您可以替換

document.querySelector(".item .points").innerHTML = counter;

e.target.children[0].innerHTML = counter;

然后你會遇到另一個問題,那就是你的計數(shù)器是全局的并且對所有按鈕都是通用的。

因此,您將不得不使用哈希圖(JS 對象)而不是單個整數(shù) counter

var counter = {};


查看完整回答
反對 回復(fù) 2021-08-20
  • 2 回答
  • 0 關(guān)注
  • 157 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號