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

您的代码无法运行，因为它会引发错误：您错过了}令牌以关闭＆＃39;检查功能。

试试这个，我做了一些修改：

＆＃13;

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

＆＃13;

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

＆＃13;

确保在images div。之后加入脚本标记我们基本上避免使用document.write，将onchange侦听器附加到每个单选按钮，然后创建图像并在单击单选按钮时将其附加到div（当它发生更改时）。

我还更改了一些内容，例如new Array到文字声明[]，并在您的单选按钮上添加了标签，这样当您点击文字时，它就像您点击了一样在按钮上。

希望这适合你。如果没有，请告诉我。祝你好运：）

Answer 2

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

没有测试，但应该让你开始

根据单选按钮选择显示所选阵列的图像？

2 个答案: