基於單選按鈕選擇顯示來自所選陣列的圖像？

Question

• 所以我想顯示一個不同的圖像陣列，使用javascript給出單選按鈕選擇，但無法獲得代碼運行。使用jquery的解決方案也可以工作。

  <script language="javascript"> 
  
  
  var surffamous = new Array; 
  surffamous[0] = "teahupoo.jpg" 
  surffamous[1] = "blacks.jpg" 
  surffamous[2] = "supertubes.jpg" 
  surffamous[3] = "pipeline.jpg" 
  
  var surfsocal = new Array; 
  surfsocal[0] = "lajolla.jpg" 
  surfsocal[1] = "oceanside.jpg" 
  surfsocal[2] = "delmar.jpg" 
  surfsocal[3] = "cardiff.jpg" 
  
  var surfcentralcal = new Array; 
  surfcentralcal[0] = "rincon.jpg" 
  surfcentralcal[1] = "leocarillo.jpg" 
  surfcentralcal[2] = "elcapitan.jpg" 
  surfcentralcal[3] = "hollister.jpg" 
  

  <form style="color: #2D5059"> 
  <p>Where would you like to explore?</p< <br> <br> 
  <input type="radio" name="spot" id="socal" value="southern">Southern California 
  <input type="radio" name="spot" id="central" value="central">Central California 
  <input type="radio" name="spot" id="famous" value="famous">Famous Spots 
  </form> 
  
  
  <script language="javascript"> 
  function check() { 
  for(i=0; i<4; i++){ 
  if(document.getElementById('socal').checked) { 
  document.write('<img src="'+ surfsocal[i] +'"/> ' + '</a>'); 
  } 
  else if(document.getElementById('central').checked) { 
  document.write('<img src="'+ surfcentralcal[i] +'"/> ' + '</a>'); 
  } 
  else if(document.getElementById('famous').checked) { 
  document.write('<img src="'+ surffamous[i] +'"/> ' + '</a>'); 
  } 
  } 
  </script> 
  

Answer 1

function check(spot) { 

    var whichArray; 
    if (spot.value == "southern") { 
     whichArray = surfsocal; 
    } 
    else if (spot.value == "central") { 
     whichArray = surfcentralcal; 
    } 
    else if (spot.value == "famous") { 
     whichArray = surffamous; 
    } 
    DisplayImages(whichArray); 
} 
function DisplayImages(images) { 
    for(i=0; i<images.length; i++) { 
     document.write('<img src="'+ images[i] +'"/> '); 
    } 
} 

然後加入onclicks的單選按鈕

<input type="radio" name="spot" id="socal" value="southern" onclick="check(this);">Southern California 
<input type="radio" name="spot" id="central" value="central" onclick="check(this);">Central California 
<input type="radio" name="spot" id="famous" value="famous" onclick="check(this);">Famous Spots 

沒有測試，但應該讓你開始

Answer 2

您的代碼不會運行，因爲它會拋出錯誤：您錯過了}令牌來'關閉'檢查功能。

試試這個，我做了一些改變：

#images img { 
 
    margin: 1em; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<form style="color: #2D5059"> 
 
    <p>Where would you like to explore?</p> 
 

 
    <input type="radio" name="spot" id="socal" value="southern"> 
 
    <label for="socal">Southern California</label> 
 

 
    <input type="radio" name="spot" id="central" value="central"> 
 
    <label for="central">Central California</label> 
 

 
    <input type="radio" name="spot" id="famous" value="famous"> 
 
    <label for="famous">Famous Spots</label> 
 

 
</form> 
 
<br> 
 
<div id="images"></div> 
 

 
<script> 
 
// Find the images div and all of the radio buttons 
 
var images = document.getElementById('images'), 
 
    radioButtons = document.getElementsByName('spot'); 
 

 
// Use [] instead of new Array() 
 
var surffamous = []; 
 
surffamous[0] = "teahupoo.jpg" 
 
surffamous[1] = "blacks.jpg" 
 
surffamous[2] = "supertubes.jpg" 
 
surffamous[3] = "pipeline.jpg" 
 

 
var surfsocal = []; 
 
surfsocal[0] = "lajolla.jpg" 
 
surfsocal[1] = "oceanside.jpg" 
 
surfsocal[2] = "delmar.jpg" 
 
surfsocal[3] = "cardiff.jpg" 
 

 
var surfcentralcal = []; 
 
surfcentralcal[0] = "rincon.jpg" 
 
surfcentralcal[1] = "leocarillo.jpg" 
 
surfcentralcal[2] = "elcapitan.jpg" 
 
surfcentralcal[3] = "hollister.jpg" 
 

 
function check() { 
 
    var image, 
 
     fragment = document.createDocumentFragment(); 
 
    for (var i = 0; i < 4; i++) { 
 
     // Don't use document.write 
 
     image = new Image(); 
 

 
     // 'this' refers to the clicked radio button 
 
     if (this.id === 'socal') { 
 
      image.src = surfsocal[i]; 
 
     } else if (this.id === 'central') { 
 
      image.src = surfcentralcal[i]; 
 
     } else if (this.id === 'famous') { 
 
      image.src = surffamous[i]; 
 
     } 
 
     // The fragment helps you minimize 
 
     // direct DOM insertions 
 
     fragment.appendChild(image); 
 
    } 
 
    images.innerHTML = ''; 
 
    images.appendChild(fragment); 
 
} 
 

 
// Attach a listener to each button, using a loop 
 
for(var i = radioButtons.length; i--;) { 
 
    radioButtons[i].onchange = check; 
 
} 
 
</script>

請確保您包括images DIV後的腳本標籤。 我們基本上是避免document.write，將一個onchange監聽器附加到每個單選按鈕，並創建一個圖像，並在單擊單選按鈕（當它發生變化時）將其附加到div。

我也改變了一些東西，如new Array字面聲明[]，並添加標籤到您的單選按鈕，以便當您單擊文本時，就好像您單擊按鈕。

希望這對你有用。如果沒有，請讓我知道。祝你好運：）