js点击事件处理，比如counter

Question

我有六个风格化的块，每个块都有一个类似的计数器。三个div标记，其中最后两个正在工作。在js中编写代码时，当您单击like+-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>

为了清晰起见，第一块可以工作，因为根据设计，在其余部分中，基板是隐藏的

Answer 1

我仍然缺少您代码的某些部分。但我理解你的目标。出于这个原因，我写了一个一般的例子，让你清楚地知道为了让你的代码工作，你需要注意什么。

1. 将您的投票按钮链接到单击事件
2. 当它启动时，确定它是否是赞成票/反对票
3. 获取当前计数并重新计算计数。重要提示：parseInt((
4. 从DOM中提取的值来计算它
5. 更新计数元素

就这样

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>