根据代码分析,点击"鎏光金"没有反应的原因可能是数据源中的图片链接有误。在jsonData对象中,"鎏光金"对应的图片链接应该为"img/b01.png", "img/b02.png", "img/b03.png",而不是两个"img/b01.png"。请确认数据源中的图片链接是否正确。

另外,代码中加载图片的部分有一个错误,变量名应为"photos"而不是"photo"。请修改以下代码:

colorPhotos.forEach(function(photo) {
  var li = document.createElement("li");
  var img = document.createElement("img");
  img.src = photo;
  li.appendChild(img);
  photoList.appendChild(li);
});

修改后的代码如下:

var colorOptions = document.querySelectorAll(".color .item");

// 为每个颜色选项添加点击事件监听器
colorOptions.forEach(function(option) {
  option.addEventListener("click", function() {
    // a) 选中当前颜色选项,其余选项恢复正常
    colorOptions.forEach(function(item) {
      if (item === option) {
        item.classList.add("selected");
      } else {
        item.classList.remove("selected");
      }
    });

    // b) 清空页面左侧产品图片列表,并加载对应颜色的所有产品图片
    var photoList = document.querySelector("#scroll ul");
    photoList.innerHTML = ""; // 清空图片列表

    // 加载对应颜色的所有产品图片
    var jsonData = {
      "星际黑": ["img/a01.png", "img/a02.png", "img/a03.png"],
      "鎏光金": ["img/b01.png", "img/b02.png", "img/b03.png"]
      // 其他颜色的图片数据...
    };

    var selectedColor = option.textContent.trim();
    var colorPhotos = jsonData[selectedColor];
    colorPhotos.forEach(function(photo) {
      var li = document.createElement("li");
      var img = document.createElement("img");
      img.src = photo;
      li.appendChild(img);
      photoList.appendChild(li);
    });

    // c) 左侧上方大图默认显示第一张产品图片
    var firstPhoto = colorPhotos[0];
    var mainPhoto = document.querySelector("#photo_pannel .photo img");
    mainPhoto.src = firstPhoto;
  });
});
``
var colorOptions = documentquerySelectorAllcolor item;								 为每个颜色选项添加点击事件监听器				colorOptionsforEachfunctionoption 				 optionaddEventListenerclick function 				 a 选中当前颜色选项其余选项恢复正常				 color

原文地址: http://www.cveoy.top/t/topic/hSha 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录