2

所以我正在尝试创建一个屏幕，该屏幕将显示大约 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>
4

3 回答 3

2

他们不会返回，因为代码总是将其更改为 _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">
于 2012-07-20T16:42:24.020 回答
1

你可以这样做：

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" />
于 2012-07-20T16:44:52.267 回答
0

在您的情况下，您应该只使用一个 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';
}
于 2012-07-20T16:48:07.553 回答