照片没有根据选择的选项改变

Question

我正在创建一个带有 yt 教程的产品页面，不幸的是代码不起作用。我正在尝试这样做，如果有人单击主照片下照片的缩略图，照片会根据选项进行更改。我希望它有意义，标准产品页面功能。不幸的是它不起作用，尝试了我能想到的任何东西。有谁知道可能出了什么问题？ 预先感谢您的宝贵时间

let MainImg = document.getElementById("MainImg");
let smallimg = document.getElementsByClassName("small-img-col");

smallimg[0].onclick = function() {
  MainImg.src = smallimg[0].src;
};
smallimg[1].onclick = function() {
  MainImg.src = smallimg[1].src;
};
smallimg[2].onclick = function() {
  MainImg.src = smallimg[2].src;
};
smallimg[3].onclick = function() {
  MainImg.src = smallimg[3].src;
};

<section id="header">
  <a href="index.html"><img src="/logo.png" class="logo" alt="" /></a>

  <div>
    <ul id="navbar" style="list-style: none; margin: 0; padding: 0">
      <li><a class="active" href="index.html">Home</a></li>
      <li><a href="shop.html">Shop</a></li>
      <li><a href="blog.html">Blog</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li id="lg-bag">
        <a href="cart.html"><i class="fi fi-rr-shopping-cart"></i></a>
      </li>

      <a href="#" id="close"><i class="fi fi-rr-cross-small"></i></a>
    </ul>
  </div>
  <div class="mobile">
    <i class="fi fi-rr-shopping-cart"><a href="cart.html"></a></i>
    <i id="bar" class="fi fi-rr-menu-burger"></i>
  </div>
</section>

<section id="prodetails" class="section-p1">
  <div class="single-pro-image">
    <img src="/f1.jpeg" width="100%" id="MainImg" alt="" />

    <div class="small-img-group">
      <div class=" small-img-col"><img src="/f1.jpeg" width="100%" /></div>
      <div class="small-img-col"><img src="/f2.jpeg" width="100%" /></div>
      <div class="small-img-col"><img src="/f3.jpeg" width="100%" /></div>
      <div class="small-img-col"><img src="/f6.jpeg" width="100%" /></div>
    </div>
  </div>
  <div class="single-pro-details">
    <h6>Home - T-shirt</h6>
    <h4>Men's Fasion</h4>
    <h2>$139.00</h2>
    <select>
      <option>Select Size</option>
      <option>S</option>
      <option>M</option>
      <option>L</option>
      <option>XL</option>
    </select>
    <input type="number" value="1" />
    <button class="normal">Add To Card</button>
    <h4>Product Details</h4>
    <span>Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has survived not only
          five centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged. It was popularised in the 1960s with
          the release of Letraset sheets containing Lorem Ipsum passages, and
          more recently with desktop publishing software like Aldus PageMaker
          including versions of Lorem Ipsum.</span
        >
      </div>
    </section>

Answer 1

我认为这里的问题在于您尝试使用

getElementsByClassName

访问图像的 src 的方式。您可以尝试如下操作：

let MainImg = document.getElementById("MainImg");
let smallimgs = document.querySelectorAll(".small-img-col img");

smallimgs.forEach(function (smallimg) {
  smallimg.addEventListener("click", function () {
    MainImg.src = this.src;
  });
});

这样做，您可以遍历所有小图像并为它们添加一个事件监听器

Answer 2

JavaScript 代码在加载图像之前执行，这意味着

smallimg

可能是一个空数组。

导入脚本时使用

defer

以确保 js 将在 html 之后加载。

<script defer src="./app.js"></script>