選擇選項2時保持選項1

好吧，我正在爲一個網站「建立自己的」。我正在使用onclick改變，所以當他們選擇問題1的顏色時，圖片將會改變。現在他們轉向選項2，選擇一種顏色，但是當他們點擊問題2的顏色選擇時，問題1的圖像將被問題2的圖像替換。因此，如何隨時顯示兩個圖像並且選擇某種顏色時保持不動？此外，我沒有使用任何CSS只js和HTML。選擇選項2時保持選項1

編輯：不完整的，遠不夠完美

<!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>

來源

2013-05-28 Dowens

顯示您的代碼。 – JohnFx

歡迎來到StackOverflow @Dowens！這裏的問題往往是簡潔的編程 - 因此他們經常包含代碼片段。沒有任何代碼片段，你的問題有點難以遵循，所以它可能會受到一些負面關注，除非你添加一些代碼片段或鏈接到jsfiddle。 –

我會用無線電輸入，然後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-29 00:02:37

阿爾伯特我喜歡這樣，我認爲這是行得通的，但我會在哪裏放置圖片的鏈接？我使用免費的網站建設者，我沒有一個目錄，所以我不得不從我的朋友網站拉我的照片，爲我託管他們 – Dowens

你應該把它們而不是結果 - 實際上，重溫你的問題表明你是使用多個圖層 - 因此，您不必擁有「if」語句，它將黑暗和光線與不同顏色的可能性結合在一起，只有開關。我要編輯我的答案 –

所以它會是案例（顏色===「綠色」）：結果=「img src」 – Dowens

選擇選項2時保持選項1

回答

相關問題