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

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="//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 中为活动类添加一般规则： .active img { visibility: visible; }

如果图像位于单独的元素中，您可以将数据集自定义属性添加到 html 中的图标。您可以在 Javascript 中使用一个值。

IE。

<img id="icon" dataset-foo="imgContainer">

并在JS中

var imgContainer = document.getElementById(icon.dataset.foo) imgContainer.classList.add("active")

您可以将其包装在函数中，并且可以将任何引用保存在对象中。通过这种方式，可以轻松跟踪任何数据并获得非常可读的代码。

Answer 3

您可以使用 CSS 来做到这一点。由于您的事件侦听器会切换far和fas类，因此请使用与这些容器内部匹配的 CSS 选择器img。

.featured-products.fas img {
  display: block;
}

.featured-products.far img {
    display: none;
}