Question

所以我正在尝试创建一个屏幕，显示大约50个切换按钮，以显示在显示器的建筑物中。

我想创建一组用作切换的图像，以便于查看。这就是我想要的效果。 http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_intro 除了图片我想要几个灯泡打开和关闭我想要的。

现在这是我的代码。我可以点击图片来改变我想要的，他们只是不会回去，有什么想法吗？

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01    
    Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"> 
    <html> 
    <head> 
    <title>Untitled Document</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <meta http-equiv="Content-Style-Type" content="text/css"> 
    <meta http-equiv="Content-Script-Type" content="text/javascript"> 
    <script type="text/javascript">
    function changeImg(img, newimg) {
    img.src = newimg;
    }


    </script>
    <body>
    <img onclick="changeImg(this, 'staten_uw.jpg')" src="staten_moored.jpg">
    <img onclick="changeImg(this, 'block_uw.jpg')" src="block_moored.jpg">
    </body>
    </html>

Answer 1

它们不会返回，因为代码总是将其更改为_uw图像。如果您希望它们切换，则该功能需要检查当前显示的图像。像这样：

function changeImg(img) {
    if ( img.src.indexOf("_uw") > 0 ) {
        img.src = img.src.replace("_uw","_moored");
    }
    else {
        img.src = img.src.replace("_moored","_uw");
    }
}

如果您有50x2个不同的图像，名为“img1_uw.jpg”，“img1_moored.jpg”，“img2_uw.jpg”，“img2_moored.jpg”等，

将会有效。

如果您只有2张图片，但想要在每张图片之间切换50个按钮，则更容易：

function changeImg(img) {
    if ( img.src == "staten_uw.jpg" ) {
        img.src = "staten_moored.jpg";
    }
    else {
        img.src = "staten_uw.jpg";
    }
}

其他答案也很简单地表明了这一点。

无论哪种方式，HTML都应该改为这样：

<img onclick="changeImg(this)" src="block_moored.jpg">

Answer 2

你可以这样做：

window.onload = function() {
    images = document.getElementsByTagName("img");
    for (i in images) {
        images[i].addEventListener("click", function(e) {
            var newsrc = this.togglesrc;
            this.togglesrc = this.src;
            this.src = newsrc;
        });
    }
};

然后使用

<img togglesrc="staten_uw.jpg" src="staten_moored.jpg" />

Answer 3

在您的情况下，您应该只使用一个img标记：

<img onclick="changeImg(this)" src="staten_moored.jpg">

并检查js中的逻辑：

function changeImg(img) {
  img.src = (img.src == 'staten_moored.jpg') ? 'block_moored.jpg' : 'staten_moored.jpg';
}

多个Onclick图像

3 个答案: