Question

这是我在这里的第一个问题，所以我希望我能尽可能地清楚。

我正在创建一个产品页面，并且有一个无序的图像列表，代表产品的各种颜色。当我点击其中一种颜色时，我希望产品图像更新以显示那种颜色的产品。

实现了一些基本功能

这是我到目前为止的代码 -

＆＃13;

function changeImage() {
    if(document.getElementById('classic400').src == 'http://i.imgur.com/DxkuRlE.jpg') {
        document.getElementById('classic400').src = 'http://i.imgur.com/02UH7UA.jpg';
    }else {
      //Not sure
    }
}

＆＃13;

.colours {
    background-color: #f5f5f5;
}

ul {
	list-style: none;
}

li {
    display: inline;
}

li img {
	height: 50px;
    border-radius: 25px;
}

＆＃13;

<div class="colours">
    <ul>
          <li><img src="http://i.imgur.com/doLMeIi.jpg"></li>
          <li><img src="http://i.imgur.com/ZQdTrml.jpg" onClick="changeImage()"></li>
          <li><img src="http://i.imgur.com/PeidQGD.jpg"></li>
          <li><img src="http://i.imgur.com/GcGpWy5.jpg"></li>
          <li><img src="http://i.imgur.com/AWCzo9N.jpg"></li>
          <li><img src="http://i.imgur.com/yTeF0qu.jpg"></li>
          <li><img src="http://i.imgur.com/i35OBvT.jpg"></li>
    </ul>
        <ul>  
          <li><img src="http://i.imgur.com/LNeGCoB.jpg"></li>
          <li><img src="http://i.imgur.com/IOpBiQ8.jpg"></li>
          <li><img src="http://i.imgur.com/jZmYBY8.jpg"></li>
          <li><img src="http://i.imgur.com/mfpTmrC.jpg"></li>
          <li><img src="http://i.imgur.com/N2FH527.jpg"></li>
          <li><img src="http://i.imgur.com/DbS3cRs.jpg"></li>
          <li><img src="http://i.imgur.com/94D0biy.jpg"></li>
        </ul>
              </div>
              
<div class="product">
    <img id="classic400" src="http://i.imgur.com/DxkuRlE.jpg" height= "400px">     
</div>

＆＃13;

这允许我单击列表中的第二个图像并更改产品图像。从这一点开始，我不知道如何将其合并以使用所有其他颜色。

我是否继续编写if / else语句以使用所有颜色，或者是否有更好/更简洁的方法来执行此操作？

我还使用上面的代码创建了一个fiddle来说明我正在谈论的内容。

任何帮助都将不胜感激，非常感谢！

Answer 1

这是一种完全不同的方法，但我认为提供了一个非常明确的解决方案：

<!doctype html>
<html>
    <head>
        <title>Test code</title>
    </head>

    <body>

        <div>
            <img src="http://mlb-s1-p.mlstatic.com/camiseta-personalizada-com-smiles-ideogramas-simbolos-13992-MLB3293421990_102012-O.jpg">
            <ul>
                <li data-src="http://mlb-s1-p.mlstatic.com/camiseta-personalizada-com-smiles-ideogramas-simbolos-13992-MLB3293421990_102012-O.jpg">Yellow</li>
                <li data-src="http://images.clipartof.com/thumbnails/67235-Royalty-Free-RF-Clipart-Illustration-Of-A-Happy-Blue-Emoticon-Face-Smiley.jpg">Blue</li>
                <li data-src="http://www.cliparthut.com/clip-arts/169/green-smiley-face-clip-art-169032.png">Green</li>
            </ul>
        </div>

        <script>

        document.addEventListener("click", function(e) {
            var target = e.target;

            // If not one of the `li` items, ignore it
            if (!target.tagName.toLowerCase() === "li") {
                return;
            }

            // If it doesn't have a data-src, ignore it
            var newSrc = target.getAttribute("data-src");
            if (!newSrc) {
                return;
            }

            // IN this case, we know exactly how the DOM is layed out
            // and that the parent we want is two levels up.
            // Looping through this is sometimes a better idea.
            var parentDiv = target.parentNode.parentNode;

            var img = parentDiv.getElementsByTagName("img")[0];
            console.log(img);

            img.src = newSrc;         
        });

        </script>
    </body>
</html>

使用onClick从无序的图像列表（颜色）更改图像

1 个答案: