JavaScript - 仅使用 addEventListener 单击缩略图来更改预览图像

Question

我正在尝试创建一个非常简单、纯 JavaScript 的图像库，在单击较小的图像缩略图时，它会将较大的预览图像更改为您刚刚单击的缩略图。

我是 JavaScript 新手，我已经对其进行了一些尝试。我还试图避免在 HTML 中使用 onClick，因为有人告诉我这是不好的做法。所以我发现使用 addEventListener 似乎是另一种方法。

唯一的问题是，我不知道如何处理它。大多数其他教程都使用 onClick 函数，这并不理想。

我想知道是否有人可以提供帮助，甚至提供一些其他资源来帮助我开始。

这是 HTML 和我的 JavaScript 起点:

HTML

<section class="image-gallery">
        <h4>IMAGE GALLERY</h4>

        <section id="gallery-preview">
          <img src="images/gallery1.png" alt="image-gallery-1">
        </section>

        <section id="gallery-thumbnails">
          <img src="images/gallery1.png" alt="image-gallery-1">     
          <img src="images/gallery2.png" alt="image-gallery-2">
          <img src="images/gallery3.png" alt="image-gallery-3">
          <img src="images/gallery4.png" alt="image-gallery-4">
          <img src="images/gallery5.png" alt="image-gallery-5">
        </section> 

      </section>

JavaScript

(function(){

  let image-preview = document.getElementById("gallery-preview");
  let image-thumbnail = document.getElementById("gallery-thumbnails");

  image-thumbnail.addEventListener("click", imageChanger);

  function imageChanger()
  {
    //something here
  }

})();

Answer 1

不要在 JavaScript 变量名称中使用连字符。破折号用于减法。您可以在类名称和元素 ID 中使用破折号，但不能作为 JavaScript 变量名称。

您的 html 需要一个用于所有图像的类。

<section id="gallery-thumbnails">
   <img class="my-images" src="images/gallery1.png" alt="image-gallery-1">     
   <img class="my-images" src="images/gallery2.png" alt="image-gallery-2">
   <img class="my-images" src="images/gallery3.png" alt="image-gallery-3">
   <img class="my-images" src="images/gallery4.png" alt="image-gallery-4">
   <img class="my-images" src="images/gallery5.png" alt="image-gallery-5">
</section> 

接下来，您的 JavaScript 将异步运行。你需要明白这一点。这意味着在加载所有 html 之前，您不应尝试运行“imageChanger()”函数。如果 html 仍在加载，当您的函数尝试将 eventListener 附加到它时，其中一些内容可能不存在。

异步意味着 JavaScript 运行并且在执行下一行代码之前不会等待长时间的进程完成。您可以做一些快速的事情，例如添加几个数字，但是当您从服务器获取数据并将其呈现在 html 页面中时，这些事情需要时间。您需要确保只有在它们准备好之后才开始处理它们。

为了确保 html 已加载，请查看 jquery 的 $(document).ready() {}。您需要将 Jquery 包含在 <script> 中标签来使用它。

$(document).ready() {

   let myImages = document.getElementsByClassName("my-image");

   //  You have more than one image in myImages.
   for (i = 0; i < myImages.length; i++) {
      myImages.addEventListener("click", imageChanger);
   }
}

// Notice this function is **outside** of document.ready.  
// You need the function immediately available.

function imageChanger()
  {
     // "this" is the element you clicked.
     this.style.height = 100px;
     this.style.width = 100px; 
  }