Question

这是电台选择：

<ul id="radio-attribute" class="radio-attribute">
    <li class="radio-attribute">
        <label for="1" class="radio-attribute">
            <input type="radio" id="1" name="Choose color" value="36" onClick="change_image(this.id)">
            <img src="images/Red.jpg" alt="Red SE1017" title=" Red SE1017 " width="25" height="25" />
        </label>
    </li>
    <li class="radio-attribute">
        <label for="2" class="radio-attribute">
            <input type="radio" id="2" name="Choose color" value="157" onClick="change_image(this.id)">
            <img src="images/Orange.jpg" alt="Orange" title=" Orange " width="25" height="25" />
        </label>
    </li>
</ul>

这很好用。

我希望根据收音机选择交换显示的图像。无线电选择会有所不同，所以我打算使用这个ID。

展示容器：

<div id="piGal" style="float: left;">
    <a href="http://www.example.com/images/main.jpg">
        <img src="images/main.jpg" alt=" Seals" title=" main image " width="250" height="106" />
    </a>
</div>

初始加载时显示正常。

我正在尝试使用我使用php动态构建的数组，因此javascript看起来像这样：

function change_image(radioID) {
    var images = ["main.jpg", "Red.jpg", "Orange.jpg"];
    document.getElementById("piGal").innerHTML = "<img src='images/'+ images[radioID]>";
}

我可以使用AJAX工作，但它不允许我弹出它，而是在新页面中打开。我一直试图使用这个，所以我可以使用模态。我对这样的javascript很新。

Answer 1

首先，如果此表单应发送到php，我强烈建议您强制使用带空格的名称。我曾经遇到过php的某些问题，但我仍然不知道为什么。

您的问题可能出在change_image()：

function change_image(radioID) {
    var images = ["main.jpg", "Red.jpg", "Orange.jpg"];
document.getElementById("piGal").innerHTML = "<img src=\"images/"+ images[radioID] +"\" />";
}

您尚未为img生成正确的HTML代码。你搞乱了HTML属性引号和JavaScript字符串引号。现在试试吧。

现在如果

image[radioID] == "main.jpg"

JavaScript将生成

<img src="images/main.jpg" />

哪个是正确的HTML。您的代码将按原样生成字符串，这是不正确的HTML，并且您的浏览器会无声地失败。

**编辑：**打开弹出窗口：

window.open("main.jpg", "imgWindow",
     "location=no,width=600,height=600,scrollbars=yes,top=100,left=700,resizable=no");

第一个参数是要打开的文件的URL，第二个参数是窗口的唯一名称（如果打开另一个具有相同窗口名称的文件，将选择相同的窗口），第三个参数是由逗号分隔的参数列表（我猜这些名称很直观）。您可以将其放在可在change_image()

创建的img标记的onClick事件中调用的函数中

jquery基于无线电ID切换图像并弹出

1 个答案: