0

好的，所以我正在为网站制作“构建您自己的”。我正在使用 onclick 更改，因此当他们为问题 1 选择颜色时，图片会更改。现在他们继续选择选项 2，选择一种颜色，但是当他们单击问题 2 的颜色选项时，问题 1 的图像被问题 2 的图像替换。那么我怎样才能让两个图像始终显示并且选择某种颜色时停留？此外，我没有使用任何仅 CSS 的 js 和 HTML。

编辑：不完整，远非完美

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Image Change Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript">
        function changeIt(objName)
        {
            //The image object accessed through its id we mentioned in the DIV block which is going to be visible currently
            var obj = document.getElementById(objName);

            //An array that hold the IDs of images that we mentioned in their DIV blocks
            var objId = new Array();

            //Storing the image IDs into the array starts here
            objId[0] = "image1";
            objId[1] = "image2";
            objId[2] = "image3";
            objId[3] = "image4";
            objId[4] = "image5";
            objId[5] = "image6";
            objId[6] = "image7";
            objId[7] = "image8";
            objId[8] = "image9";
            objId[9] = "image10";
            objId[10] = "image11";
            objId[11] = "image12";
            objId[12] = "image13";
            //Storing the image IDs into the array ends here

            //A counter variable going to use for iteration
            var i;

            //A variable that can hold all the other object references other than the object which is going to be visible
            var tempObj;

            //The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the
            //only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part
            //of the if statement within this loop.
            for(i=0;i<objId.length;i++)
            {
                if(objName == objId[i])
                {
                    obj.style.display = "block";
                }
                else
                {
                    tempObj = document.getElementById(objId[i]);
                    tempObj.style.display = "none"; 
                }
            }
            return; 
        }
    </script>
</head>
<body background="http://liberatedinamerica.com/wp-content/uploads/2013/05/Gray-Background-Wallpaper02.jpg">
    <LAYER NAME="under" LEFT=250 TOP=500>
        <div id="image1">
            <p style="float: right;">
                <img src="http://liberatedinamerica.com/wp-content/uploads/2013/05/shell-black.png" width="75%" height="75%" border="0" alt="one" />
            </p>
        </div>
        <div id="image2" style="display:none">
            <p style="float: right;">
                <img src="http://liberatedinamerica.com/wp-content/uploads/2013/05/shell-blue.png" width="75%" height="75%" border="0" alt="two"/>
            </p>
        </div>
        <div id="image3" style="display:none">
            <p style="float: right;">
                <img src="http://liberatedinamerica.com/wp-content/uploads/2013/05/shell-pink.png" width="75%" height="75%" border="0" alt="three" />
            </p>
        </div>
        <div id="image4" style="display:none">
            <p style="float: right;">
                <img src="http://liberatedinamerica.com/wp-content/uploads/2013/05/shell-red.png" width="75%" height="75%" border="0" alt="four" />
            </p>
        </div>
        <div id="image5" style="display:none">
            <p style="float: right;">
                <img src="http://liberatedinamerica.com/wp-content/uploads/2013/05/shell-white2.png" width="75%" height="75%" border="0" alt="five" />
            </p>
        </div>
    </layer>
    <LAYER NAME="over" LEFT=250 TOP=500>
        <div id="image6" style="display:none">
            <p style="float: right;">
                <img src="http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-thumbs-ps3-stock.png" width="75%" height="75%" border="0" alt="one" />
            </p>
        </div>
        <div id="image7" style="display:none">
            <p style="float: right;">
                <img src="http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-thumbs-ps3-blue.png" width="75%" height="75%" border="0" alt="two"/>
            </p>
        </div>
        <div id="image8" style="display:none">
            <p style="float: right;">
                <img src="http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-thumbs-ps3-pink.png" width="75%" height="75%" border="0" alt="three" />
            </p>
        </div>
        <div id="image9" style="display:none">
            <p style="float: right;">
                <img src="http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-thumbs-ps3-red.png" width="75%" height="75%" border="0" alt="four" />
            </p>
        </div>
        <div id="image10" style="display:none">
            <p style="float: right;">
                <img src="http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-thumbs-ps3-lime.png" width="75%" height="75%" border="0" alt="five" />
            </p>
        </div>
        <div id="image11" style="display:none">
            <p style="float: right;">
                <img src="http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-thumbs-ps3-orange.png" width="75%" height="75%" border="0" alt="three" />
            </p>
        </div>
        <div id="image12" style="display:none">
            <p style="float: right;">
                <img src="http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-thumbs-ps3-purple.png" width="75%" height="75%" border="0" alt="four" />
            </p>
        </div>
        <div id="image13" style="display:none">
            <p style="float: right;">
                <img src="http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-thumbs-ps3-yellow.png" width="75%" height="75%" border="0" alt="five" />
            </p>
        </div>
    </layer>
    <br>
    <br>
    <font size="5" color="gray">
        <center>
            Shell Color
            <br>
            <a id="one" href="#" onclick="changeIt('image1'); return false;"><img src= "http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-swatch-black.jpg" style="border: 3px gray outset;"></a>
            <a id="two" href="#" onclick="changeIt('image2'); return false;"><img src= "http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-swatch-blue.jpg" style="border: 3px gray outset;"></a>
            <a id="three" href="#" onclick="changeIt('image3'); return false;"><img src= "http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-swatch-pink.jpg" style="border: 3px gray outset;"></a>
            <a id="four" href="#" onclick="changeIt('image4'); return false;"><img src= "http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-swatch-red.jpg" style="border: 3px gray outset;"></a>
            <a id="five" href="#" onclick="changeIt('image5'); return false;"><img src= "http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-swatch-white.jpg" style="border: 3px gray outset;"></a>
            ___________
            Thumbsticks
            <br>
            <a id="one" href="#" onclick="changeIt('image6'); return false;"><img src= "http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-swatch-black.jpg" style="border: 3px gray outset;"></a>
            <a id="two" href="#" onclick="changeIt('image7'); return false;"><img src= "http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-swatch-blue.jpg" style="border: 3px gray outset;"></a>
            <a id="three" href="#" onclick="changeIt('image8'); return false;"><img src= "http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-swatch-pink.jpg" style="border: 3px gray outset;"></a>
            <a id="four" href="#" onclick="changeIt('image9'); return false;"><img src= "http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-swatch-red.jpg" style="border: 3px gray outset;"></a>
            <a id="five" href="#" onclick="changeIt('image10'); return false;"><img src= "http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-swatch-lime.jpg" style="border: 3px gray outset;"></a>
            <a id="one" href="#" onclick="changeIt('image11'); return false;"><img src= "http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-swatch-orange.jpg" style="border: 3px gray outset;"></a>
            <a id="two" href="#" onclick="changeIt('image12'); return false;"><img src= "http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-swatch-purple.jpg" style="border: 3px gray outset;"></a>
            <a id="three" href="#" onclick="changeIt('image13'); return false;"><img src= "http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-swatch-yellow.jpg" style="border: 3px gray outset;"></a>
        </center>
    </font>
</body>

4

1 回答 1

0

我会使用无线电输入，然后使用 jQuery 并switch选择正确的图像来提供服务。jsFiddle我通过混合颜色做了一个简单的例子：

function color() {
    var shell = $("[name='shell']:checked").val(),
        thumbs = $("[name='thumbs']:checked").val(),
        result = {
            "shell": "",
            "thumbs": ""
        };

    switch (true) {
        case (shell === "black"):
            result.shell = "http://liberatedinamerica.com/wp-content/uploads/2013/05/shell-black.png";
            break;
        case (shell === "blue"):
            result.shell = "http://liberatedinamerica.com/wp-content/uploads/2013/05/shell-blue.png";
            break;
        case (shell === "pink"):
            result.shell = "http://liberatedinamerica.com/wp-content/uploads/2013/05/shell-pink.png";
            break;
    }

    switch (true) {
        case (thumbs === "red"):
            result.thumbs = "http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-thumbs-ps3-red.png";
            break;
        case (thumbs === "lime"):
            result.thumbs = "http://liberatedinamerica.com/wp-content/uploads/2013/05/ey-thumbs-ps3-lime.png";
            break;
    }

    $(".shell").attr("src", result.shell);
    $(".thumbs").attr("src", result.thumbs);

}

通过将这两个属性分开，我们可以独立访问它们的值。

于 2013-05-29T00:02:37.920 回答