Javascript EventListener 和 Element Selector 问题

Question

长话短说，我有一个 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);

Answer 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，那就太好了！

Javascript EventListener 和 Element Selector 问题

Javascript EventListener and Element Selector problem

javascript

jquery

dom

events

jquery-selectors