var colorOptions = documentquerySelectorAllcolor item; 为每个颜色选项添加点击事件监听器 colorOptionsforEachfunctionoption optionaddEventListenerclick function a 选中当前颜色选项其余选项恢复正常 color
根据代码分析,点击"鎏光金"没有反应的原因可能是数据源中的图片链接有误。在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;
});
});
``
原文地址: http://www.cveoy.top/t/topic/hSha 著作权归作者所有。请勿转载和采集!