基于单选按钮选择显示来自所选阵列的图像？

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字面声明[]，并添加标签到您的单选按钮，以便当您单击文本时，就好像您单击按钮。

希望这对你有用。如果没有，请让我知道。祝你好运：）