我有六個程式化的街區，每個街區都有一個類似的柜臺。三個 div 標簽，其中最后兩個正在作業。js寫代碼時，點贊 -1按鈕時，只統計第一個塊（卡片），其余五個保持不變。當您像在其他塊中一樣單擊并顯示 - 1 時，如何使代碼也能正常作業
<div class="like_list">
<div class="like"></div>
<div class="total">57</div>
const btn = document.querySelector('.like');
let like = true,
likeCount = document.querySelector('.total').innerHTML;
btn.addEventListener('click', () => {
likeCount = like ? likeCount : --likeCount;
like = !like;
document.querySelector('.total').innerHTML = likeCount;
});
其他html代碼
<div class="card_list_places">
<div class="list_item">
<img src="./assets/img/heh.png" alt="heh" />
<div class="overlay_list">
<div class="overlay_title_list">
<h6>NAGOYA</h6>
</div>
<div class="like_list lykas">
<div class="like"></div>
<div class="total">140</div>
</div>
</div>
<div class="list_text">
<p>
Jump off balcony, onto stranger's head. Chase ball of string
hide when guests come over. Being gorgeous with belly side up
i could pee on this.
</p>
</div>
<div class="button_list"><p class="see_more">SEE MORE</p></div>
</div>
<div class="list_item">
<img src="./assets/img/snow.png" alt="snow" />
<div class="overlay_list">
<div class="overlay_title_list">
<h6>NIIGATA</h6>
</div>
<div class="like_list">
<div class="like"></div>
<div class="total">120</div>
</div>
</div>
<div class="list_text">
<p>
Jump off balcony, onto stranger's head. Chase ball of string
hide when guests come over. Being gorgeous with belly side up
i could pee on this.
</p>
</div>
<div class="button_list"><p class="see_more">SEE MORE</p></div>
</div>
<div class="list_item">
<img src="./assets/img/sity.png" alt="sity" />
<div class="overlay_list">
<div class="overlay_title_list">
<h6>OSAKA</h6>
</div>
<div class="like_list">
<div class="like"></div>
<div class="total">77</div>
</div>
</div>
<div class="list_text">
<p>
Jump off balcony, onto stranger's head. Chase ball of string
hide when guests come over. Being gorgeous with belly side up
i could pee on this.
</p>
</div>
<div class="button_list"><p class="see_more">SEE MORE</p></div>
</div>
<div class="list_item">
<img src="./assets/img/red.png" alt="red" />
<div class="overlay_list">
<div class="overlay_title_list">
<h6>SAITAMA</h6>
</div>
<div class="like_list">
<div class="like"></div>
<div class="total">240</div>
</div>
</div>
<div class="list_text">
<p>
Jump off balcony, onto stranger's head. Chase ball of string
hide when guests come over. Being gorgeous with belly side up
i could pee on this.
</p>
</div>
<div class="button_list">
<p class="see_more">SEE MORE</p>
</div>
</div>
<div class="list_item">
<img src="./assets/img/sakura.png" alt="sakura" />
<div class="overlay_list">
<div class="overlay_title_list">
<h6>UENO</h6>
</div>
<div class="like_list">
<div class="like"></div>
<div class="total">93</div>
</div>
</div>
<div class="list_text">
<p>
Jump off balcony, onto stranger's head. Chase ball of string
hide when guests come over. Being gorgeous with belly side up
i could pee on this.
</p>
</div>
<div class="button_list">
<p class="see_more">SEE MORE</p>
</div>
</div>
<div class="list_item">
<img src="./assets/img/salut.png" alt="salut" />
<div class="overlay_list">
<div class="overlay_title_list">
<h6>SHIBUYA</h6>
</div>
<div class="like_list">
<div class="like"></div>
<div class="total">57</div>
</div>
</div>
<div class="list_text">
<p>
Jump off balcony, onto stranger's head. Chase ball of string
hide when guests come over. Being gorgeous with belly side up
i could pee on this.
</p>
</div>
<div class="button_list">
<p class="see_more">SEE MORE</p>
</div>
</div>
</div>
為清楚起見，第一個塊有效，因為根據設計，其余部分隱藏了基板
uj5u.com熱心網友回復：
我仍然缺少您的代碼的某些部分。但我明白你的目的。出于這個原因，我撰寫了一個通用示例，讓您清??楚地了解您需要注意什么才能使您的代碼正常作業。
- 將您的投票按鈕鏈接到點擊事件。
- 確定觸發時是否為贊成/反對票。
- 獲取當前計數并重新計算計數。重要：parseInt()
- 您從 DOM 中提取的值來計算它。
- 更新計數元素
而已！
const btns = document.querySelectorAll('.vote-btn');
for (let i = 0; i < btns.length; i ) {
btns[i].addEventListener('click', (ev) => {
const direction = ev.target.classList.contains('up') ? true : false;
const span = ev.target.parentElement.parentElement.querySelector('span');
let counting = span.innerHTML
counting = parseInt(counting) (direction ? 1 : -1)
span.innerHTML = counting
})
}.container {
display: flex;
gap: 20px;
}
.vote-btn {
width: 100px;
height:30px;
}<div class="container">
<div class="items">
<img src="https://via.placeholder.com/300">
<div clsss="voting">
<button class="vote-btn up"> </button>
<button class="vote-btn down">-</button>
</div>
<span class="counting">0</span>
</div>
<div class="items">
<img src="https://via.placeholder.com/300">
<div clsss="voting">
<button class="vote-btn up"> </button>
<button class="vote-btn down">-</button>
</div>
<span class="counting">0</span>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/443706.html
標籤：javascript html css
上一篇：相鄰div的孩子需要垂直水平
下一篇：將Javascript匯入CSS