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

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

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

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

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