if/else 事件侦听器的选择器问题

Question

我正在对一个事件侦听器执行 if/else 操作，以便对循环创建的几个元素的总“赞数”执行 +1 或 -1。

问题是它并不适用于每个元素，即使有 foreach

它对第一个元素非常有效，但对于其他元素，它每次都只执行 -1。

我知道问题是我的 select 或 const hearts = document.querySelectorAll(".heart"); 将第 93 行称为 hearts[0] 只有 select 是带有 .heart class 的第一个元素，但无法弄清楚该怎么做以及 select 其他的。你们能帮帮我吗？我尝试使用 const hearts = document.getElementsByClassName("heart")[0]; 而不是相同的 resumt

如果我删除 [0]，它会抛出错误“无法读取未定义的属性 'contains'”

//Total likes section
const TotalPhotoLikes= document.querySelectorAll('photoLikes');
const likeInfo= document.getElementById('likeInfo');
const hearts = document.querySelectorAll(".heart");

const allHearts = document.getElementsByClassName("heart")[0];

//Sets initial Total likes 
var sum = 0.0;
$('.photoLikes').each(function() {
  sum += parseFloat(this.value);
} ) ;
likeInfo.textContent= "Total likes:" + sum ;

// Changes total when heart clicked 

hearts.forEach((span) => span.addEventListener("click", (event) => {
  if( allHearts.classList.contains("liked")){
    $('.photoLikes').each(function() {
      sum = sum + (.35);
    } ) ;
    likeInfo.textContent=  (parseFloat(sum).toFixed(0)) ;
  } 

  else{
    $('.photoLikes').each(function() {
      sum = sum - (.35);
    } ) ;
    likeInfo.textContent=  (parseFloat(sum).toFixed(0)) ;
  }
}))

和codepen（JS中第90行）：https://codepen.io/enukeron/pen/qBaZNbb?editors=1111

Answer 1

问题似乎是您没有等待脚本添加所有 li 元素。 appenChild 需要一些时间，因此将您的代码包装在 100 毫秒的 setTimeout 中可能会解决您的问题。

Answer 2

看起来你的 if 条件有问题：96 (https://codepen.io/enukeron/pen/qBaZNbb?editors=1111)

您应该将 if 条件更改为

if( span.classList.contains("liked")){

即。跨度变量包含所选事件

if/else 事件侦听器的选择器问题

Selector problem for if/else event listener

javascript

arrays

event-listener

selector