querySelector绑定点击事件仅首个元素生效 同类名元素无响应

你的JS代码全部用document.querySelector()获取元素，这个接口只会返回页面里第一个匹配选择器的元素。也就是说你只给第一张披萨的图片、第一个食谱链接栏、第一个链接图标绑定了事件，后面帕夫洛娃等卡片里的对应元素根本没被选中，自然点击不会触发任何效果。
另外你的类名切换逻辑有冗余：food-img、recipe-link是元素默认挂载的基础样式类，不需要反复增删，来回移除/添加这些类反而可能导致基础样式丢失，只需要切换代表激活状态的功能类即可。

1. 不再全局获取单个食物图、链接元素，改为获取所有食谱卡片的集合，遍历给每个卡片单独绑定事件
2. 事件触发时，只查找、操作当前点击卡片内部的对应元素，避免误改其他卡片的样式
3. 简化类名切换逻辑，只增删激活状态类，不动基础样式类

// 顶栏图钉固定逻辑（这部分原有逻辑正常，无需修改）
const pinTopBar = document.querySelector('.fa-thumbtack');
const topBar = document.querySelector('#top-bar');
if (topBar.classList.contains('fix')) {
  pinTopBar.style.color = 'goldenrod';
}
pinTopBar.addEventListener('click', function() {
  if (!topBar.classList.contains('fix')) {
    topBar.classList.add('fix');
    pinTopBar.style.color = 'goldenrod';
  } else {
    topBar.classList.remove('fix');
    pinTopBar.style.color = 'black';
  }
})

// 遍历所有食谱卡片，逐个绑定交互事件
const allRecipeCards = document.querySelectorAll('.each-recipe');
allRecipeCards.forEach(card => {
  // 仅查找当前卡片内部的元素，不会选到其他卡片的内容
  const foodImg = card.querySelector('.food-img');
  const recipeLink = card.querySelector('.recipe-link');
  const linkIcon = card.querySelector('.fa-link');

  // 图片点击切换激活状态
  foodImg.addEventListener('click', function() {
    if (foodImg.classList.contains('active')) {
      // 取消激活
      foodImg.classList.remove('active', 'food-hover');
      recipeLink.classList.remove('click');
      linkIcon.classList.replace('blue-link', 'white-link');
    } else {
      // 激活选中
      foodImg.classList.add('active');
      recipeLink.classList.add('click');
      linkIcon.classList.replace('white-link', 'blue-link');
    }
  })

  // 鼠标移入加悬停样式，激活状态下不重复加
  foodImg.addEventListener('mouseenter', function() {
    if (!foodImg.classList.contains('active')) {
      foodImg.classList.add('food-hover');
    }
  })
})

替换原有JS代码之后，所有食谱卡片的点击、悬停交互都会正常生效，每个卡片的状态互相独立，不会出现点帕夫洛娃卡片只修改披萨卡片样式的问题。

内容的提问来源于stack exchange，提问作者Marisa Kirisame