Javascript 限制将图像显示为 1 个显示器

Question

我目前正在使用 Javascript 和 Jquery 显示图像，幸运的是我将在另一个元素中使用它，网络上有很多资源，我现在可以显示图像，但是，一旦用户再次单击按钮，它将显示另一张图片，我试图将显示限制为 1。我怎样才能做到这一点？欢迎​​提出任何意见/建议/意见。

这是我的代码和 fiddle :http://jsfiddle.net/Bc6Et/1560/

html

 <select name="code" id="code" size="">
        <option value="">imgA</option>
        <option value="">imgB</option>
        <option value="">imgC</option>
        <option value="">imgD</option>
</select>
<input type="button" onclick="showimg()" value="Display">

JavaScript

function showimg() {
        var q = document.getElementById("code");
        var selected = q.options[q.selectedIndex].value;

        var src = "img/"+selected+".png"; 
        show_image(src);
}
function show_image(src, width, height, alt) {
        var img = document.createElement("img");
        img.src = src;
        img.width = 100;
        img.height=100;
        img.alt=alt;
        document.body.appendChild(img);
}

Answer 1

代替 appendChild，只需设置现有 img 标签的 src。否则，您需要在调用 appendChild 之前从 DOM 中删除旧图像。

HTML

<select name="code" id="code" size="">
        <option value="">imgA</option>
        <option value="">imgB</option>
        <option value="">imgC</option>
        <option value="">imgD</option>
</select>
<input type="button" onclick="showimg()" value="Display">
<img src="placeholder.png" id="placeholderImg" style="display: none;" />

JS

function showimg() {
    var q = document.getElementById("code");
    var selected = q.options[q.selectedIndex].value;

    var src = "http://www.unc.edu/~matusiak/imgs/Under-Construction-1.gif";
    var img = document.getElementById("placeholderImg");
    img.src = src;
    img.style.display = "inline";
}

这是一个 updated Fiddle .

此外，这里没有 jQuery。如果您使用的是 jQuery，则应将您的函数替换为:

$(function() {
    $("input").click(function() {
        var selected = $("#code").val();
        $("#placeholderImg").attr("src", "http://www.unc.edu/~matusiak/imgs/Under-Construction-1.gif");
    });
});