Javascript 选择选项2时，保持选项1处于选中状态
好的，我正在为一个网站做一个“构建你自己的”。我使用的是onclick change，所以当他们为问题1选择颜色时，图片会发生变化。现在，他们转到选项2，选择一种颜色，但当他们单击问题2的颜色选项时，问题1的图像将替换为问题2的图像。那么，当选择某一种颜色时，如何使两幅图像始终显示并保持不变呢？此外，我没有使用任何CSS，只使用js和HTML 编辑：不完整，离完美还很远Javascript 选择选项2时，保持选项1处于选中状态,javascript,html,image,onclick,Javascript,Html,Image,Onclick,好的，我正在为一个网站做一个“构建你自己的”。我使用的是onclick change，所以当他们为问题1选择颜色时，图片会发生变化。现在，他们转到选项2，选择一种颜色，但当他们单击问题2的颜色选项时，问题1的图像将替换为问题2的图像。那么，当选择某一种颜色时，如何使两幅图像始终显示并保持不变呢？此外，我没有使用任何CSS，只使用js和HTML 编辑：不完整，离完美还很远 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E
<!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>
图像更改演示
函数changeIt（objName）
{
//通过我们在DIV块中提到的id访问的图像对象当前将可见
var obj=document.getElementById（objName）；
//一个数组，它保存我们在DIV块中提到的图像ID
var objId=新数组（）；
//将图像ID存储到阵列中从这里开始
objId[0]=“image1”；
objId[1]=“图像2”；
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”；
//将图像ID存储到数组中的操作到此结束
//用于迭代的计数器变量
var i；
//一个变量，可以保存除将要可见的对象之外的所有其他对象引用
var tempObj；
//下面的循环根据单个图像的ID显示图像。我们将其ID传递到此函数的图像将是
//仅显示其余图像的图像将根据其ID隐藏，并且该部分已由else部分处理
//此循环中if语句的。
对于（i=0；i我将使用无线电输入，然后使用jQuery和开关
选择要服务的正确图像。
我通过混合颜色做了一个简单的例子：
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);
}
通过将这两个属性分开，我们可以独立访问它们的值。欢迎来到StackOverflow@Dowens！这里的问题往往是关于编程的简明问题，因此它们通常包含代码片段。如果没有任何代码片段，您的问题就有点难以理解，因此可能会引起一些负面注意，除非你可以添加一些代码片段或JSFIDLE的链接。阿尔伯特：我喜欢这样，我想这会管用的，但是我应该把图片的链接放在哪里呢？我使用的是免费的网站生成器，我没有目录，所以我必须从我的朋友网站上为我收集图片。你应该把它们放在那里，而不是放在结果上——实际上，是重新访问您的问题表明您使用了多个层-因此您不必使用将黑暗和光明的可能性与不同颜色结合在一起的if
语句，只需使用开关。我将编辑我的回答，因此它将是case（color==“green”）：result=“img src”这有点不同，因为您有两个层（注意，在我的示例中，我只有一个显示输出的div
），但是您可以对其进行调整。我已经更改了答案并更新了小提琴，现在请查看：您太棒了！谢谢！