Javascript EventListener 和 Element Selector 问题

Posted 2023-03-05

【中文标题】Javascript EventListener 和 Element Selector 问题

【英文标题】：Javascript EventListener and Element Selector problem

【发布时间】：2021-03-17 12:41:46

【问题描述】：

长话短说，我遇到了 javascript 选择器问题。

我有一个循环，它创建了几个元素，每个元素都有相同的按钮和不同的输入值。 单击按钮需要将关联的输入值增加 1，并更改纵横比（在 +1 和 -1 之间切换）。

我的问题是单击一个按钮会改变所有按钮的外观，并增加最后一个输入值的值而不是关联的值。

我尝试将 [i] 与选择器一起使用，以及 getElementsByNames 等等。

似乎不容易解释清楚，这可能会有所帮助： https://codepen.io/enukeron/pen/qBaZNbb

感谢您提供的任何帮助。

html：

     <div class="photoGrid">  </div>

Javascipt：

const PhotographeID= 82; 
var jsonFile =  
        "media": [
     "photographerId": 82, "likes": 82, ,
     "photographerId": 82, "likes": 62, 
]
  
const photoLikes= document.getElementById ('photoLikes');
var photoGrid  = document.getElementsByClassName('photoGrid')[0];
var heart=  document.getElementById('heart');
var imageCard  = document.getElementsByClassName('imageCard')[0];

function findId(jsonFile, idToLookFor) 
var media = jsonFile.media;
for (var i = 0; i < media.length; i++) 
if (media[i].photographerId == idToLookFor) 
          
// Creating Dom Elements
 var imageCard = document.createElement('div');
 imageCard.classList.add('imageCard');
 photoGrid.appendChild(imageCard);
                
 var photoInfos = document.createElement('div');
 photoInfos.classList.add('photoInfos');
 imageCard.appendChild(photoInfos);   
                       
 var photoLikes = document.createElement('input');
 photoLikes.classList.add('photoLikes');
 photoLikes.setAttribute("type", "number");
 photoLikes.setAttribute("value", media[i].likes);
 photoLikes.readOnly = true;
 photoInfos.appendChild(photoLikes);        
          
 var heart = document.createElement('span');
 heart.classList.add('heart');
  heart.classList.add(i);
 photoInfos.appendChild(heart);   
          
  var faHeart= document.createElement('i');
  faHeart.classList.add('fa');
  faHeart.classList.add('fa-heart-o');
  faHeart.setAttribute("aria-hidden", "true" );
  faHeart.setAttribute("id", "faHeart");
  heart.appendChild(faHeart);
  
  
// like button functions 
var heartI= document.getElementsByClassName(i);
  
heart.addEventListener('click', (event) => 
if( heart.classList.contains("liked"))
$(".heart").html('<i class="fa fa-heart-o" aria-hidden="true"></i>');
heart.classList.remove("liked");
      
 /*Removes 1 like */
 var value = parseInt(photoLikes.value, 10);
 value = isNaN(value) ? 0 : value;
 value--;
 photoLikes.value = value;  
    
  
  else
      $(".heart").html('<i class="fa fa-heart" aria-hidden="true"></i>');
      heart.classList.add("liked");
    
    /*adds 1 like */
var value = parseInt(photoLikes.value, 10);
value = isNaN(value) ? 0 : value;
value++;
photoLikes.value = value; 
    
  );
;   
findId(jsonFile, PhotographeID);

【问题讨论】：

如果您没有明确需要它的行为，请不要使用 var。 JS 将 var 声明“传送”到函数体的顶部。如果您对此一无所知，在某些情况下可能会表现得很奇怪。改用 const 或 let 。将 photolikes 用作函数外部的 const、函数内部的局部 var 以及 eventlistener 箭头函数内部的 upperscoped 变量可能也不是一个好主意。你有没有证明，它总是“链接”的照片喜欢。你的价值在下降/下降？

我正在检查我的代码和你的答案。确实将“var photolikes”更改为“const photolikes”已经解决了 +1 -1 问题！非常感谢，我开始失去希望了。我会完成你的建议，也许它也会解决其他问题

【参考方案1】：

太好了，我让一切正常：https://codepen.io/enukeron/pen/qBaZNbb?editors=1010

正如@kaiLehmann 所指出的，计数问题是由于误用了 Var 而不是 Const。 按钮一起改变的方面是由于使用了：

$(".heart").html('<i class="fa fa-heart" aria-hidden="true"></i>');

而不是 heart.innerHTML='<i class="fa fa-heart" aria-hidden="true"></i>';

我不知道为什么，如果有人能解释其中的区别，希望一个是纯 JS，另一个是 Jquery，那就太好了！

【讨论】：

布拉沃自己解决了这个问题！关于您剩下的问题：heart 是您用来创建span 元素的变量...所以它仅在for 循环迭代期间引用该元素。 --- 而$(".heart") 是查找时页面中具有hearth 类的所有元素的集合。现在，应用的方法 (.html()) 只能应用于一个元素...所以 jQuery 假定它是集合中的第一个。

@LouysPatriceBessette 非常感谢。如果我理解正确，问题出在.html() 而不是我不需要更改的$(".heart") 选择器？

不，问题在于$(".heart") 是具有heart 类的所有元素的集合（读取：列表）...从该元素列表中，.html() 是仅适用于第一个。在您的 for 循环中，$(".heart").last() 会起作用，但使用 JS 的 heart 变量会更好。