Question

我目前正在使用Javascript和Jquery显示图像，我将用于另一个项目幸运的是网络中有很多资源，我现在可以显示图像，一旦用户再次点击按钮，它将会显示另一个图像，我试图将显示限制为1。我怎样才能做到这一点？任何意见/建议/意见都表示赞赏。

这是我的代码和小提琴：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");
    });
});

Answer 2

如果您想保留您的代码，只需添加布尔值var display = false;，然后在显示图片时将其设置为true

FIDDLE

var display =  false;
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";
        if(!display){ //test if image has already been displayed
            show_image(src);
            display =  true;
        }
}

Javascript限制显示图像到1显示

2 个答案: