通过事件监听器切换/显示图像

Question

我有一个通过 API 调用获得的特色产品列表，列表中显示了标题和图标。所有产品也都有图像（我也通过相同的 API 调用获得图像）

我希望图像在图标未激活时不显示，但在图标激活时显示。不确定当该产品的图标处于活动状态时如何显示该特定图像。

（对编码有点陌生，如果这是一个奇怪的问题，很抱歉）

export function featuredProducts(products)

const featuredProductsContainer = document.querySelector(".featured-products_list");

featuredProductsContainer.innerHTML = "";

for (let i = 0; i < products.length; i++) {

  console.log(products[i]);

  if (products[i].featured) {

    featuredProductsContainer.innerHTML +=

      `<li class="featured-products">

<p>${products[i].title}<i class="far fa-flag" data-name="${products[i].title}"></i></p></li>

<img src="http://localhost:1337${products[i].image.url}" class="${products[i].title}" 

height="300" width="300" style="display: none;">`;

  }

}

const flag = document.querySelectorAll(".featured-products i");

flag.forEach(function(icon) {

  icon.addEventListener("click", clicked);

});

function clicked(event) {

  event.target.classList.toggle("fas"); //active

  event.target.classList.toggle("far"); //unactive

}

}

Answer 1

TL;DR 您需要添加 css 来隐藏/显示图像。我将提出一种稍微不同的方法，即直接切换图像上的类，以避免对标记和巨大的 CSS 选择器进行更复杂的重新排列。但首先，为了更容易，您应该将标签放在img它们的内部li，而不是旁边。因此，首先，让我们将结束li标记移至末尾，位于img. 注意我还删除了 的内联样式style="display: none;"。for (let i = 0; i < products.length; i++) {  console.log(products[i]);  if (products[i].featured) {  featuredProductsContainer.innerHTML +=      `<li class="featured-products"><p>${products[i].title}<i class="far fa-flag" data-name="${products[i].title}"></i></p><img src="http://localhost:1337${products[i].image.url}" class="${products[i].title}" height="300" width="300"></li>`;  }}然后，在您的点击处理程序中，让我们做一些不同的事情：function clicked(event) {  // remove all active classes  const $imgs = document.querySelectorAll('.fas')  $imgs.forEach(i => i.classList.toggle('fas'))  // add active class to targeting img  const $img = event.target.closest('li.featured-products').querySelector('img')  $img.classList.toggle("fas")  $img.classList.toggle("far");}最后，修改自@barmar.featured-products img.fas {  display: block;}.featured-products img.far {    display: none;}

Answer 2

有很多方法可以实现此目的，很大程度上取决于触发图标活动状态的因素。如果它是任何类型的输入，并且您可以将数据保存在同一个容器中，那么您需要做的就是向父级添加一个“活动”CSS 类。这是最高效的方法，因为您可以将读取、写入和任何回流保持在最低限度。只需在 css 中为活动类添加一般规则：&nbsp;.active img { visibility: visible; }如果图像位于单独的元素中，您可以将数据集自定义属性添加到 html 中的图标。您可以在 Javascript 中使用一个值。IE。<img id="icon" dataset-foo="imgContainer">并在JS中var imgContainer = document.getElementById(icon.dataset.foo)&nbsp;imgContainer.classList.add("active")您可以将其包装在函数中，并且可以将任何引用保存在对象中。通过这种方式，可以轻松跟踪任何数据并获得非常可读的代码。

Answer 3

您可以使用 CSS 来做到这一点。由于您的事件侦听器会切换far和fas类，因此请使用与这些容器内部匹配的 CSS 选择器img。.featured-products.fas&nbsp;img&nbsp;{ &nbsp;&nbsp;display:&nbsp;block; } .featured-products.far&nbsp;img&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none; }