Fatal编程技术网

使用JavaScript交换图像

javascript html

使用JavaScript交换图像,javascript,html,Javascript,Html,我正在尝试做一个显示，在点击后（从0到1，从1到2，从2到3，再次从3到0）交换图像。下面是一些代码 js function swap() { if (document.getElementById("Wins").src.endsWith('0win.png') != -1) { document.getElementById("Wins").src = "images/1win.png"; } else if (document.getElementById

我正在尝试做一个显示，在点击后（从0到1，从1到2，从2到3，再次从3到0）交换图像。下面是一些代码

js

function swap() {

    if (document.getElementById("Wins").src.endsWith('0win.png') != -1) {
        document.getElementById("Wins").src = "images/1win.png";
    } else if (document.getElementById("Wins").src.endsWith('1win.png') != -1) {
        document.getElementById("Wins").src = "images/2win.png";
    } else if (document.getElementById("Wins").src.endsWith('2win.png') != -1) {
        document.getElementById("Wins").src = "images/3win.png";
    } else if (document.getElementById("Wins").src.endsWith('3win.png') != -1) {
        document.getElementById("Wins").src = "images/0win.png";
    }
}

function swap1() {
    if (document.getElementById("Wins1").src.endsWith('0win.png') != -1) {
        document.getElementById("Wins1").src = "images/1win.png";
    } else if (document.getElementById("Wins1").src.endsWith('1win.png') != -1) {
        document.getElementById("Wins1").src = "images/2win.png";
    } else if (document.getElementById("Wins1").src.endsWith('2win.png') != -1) {
        document.getElementById("Wins1").src = "images/3win.png";
    } else if (document.getElementById("Wins1").src.endsWith('3win.png') != -1) {
        document.getElementById("Wins1").src = "images/0win.png";
    }
}
html

<body>
    <img src="images/0win.png" id="Wins" onclick="swap()"/>
    <img src="images/0win.png" id="Wins1" onclick="swap1()"/>
</body>
（我想）我没什么可说的了。

我会用这个来代替：

if (document.getElementById("Wins1").src.indexOf('0win') != -1) {
这是纯JS，可能更快

如果您坚持使用prototype，我认为您应该使用
.src.prototype.endsWith（…

更新 我让你的代码变得更轻巧、更可变/更灵活/随便什么

HTML

<body>
    <img id="Wins" src="images/0win.png" onclick="swap(this.src)" />
</body>

<img src="images/0win.png" id="Wins" onclick="swap('Wins')"/>
<img src="images/0win.png" id="Wins1" onclick="swap('Wins1')"/>

工作示例：

（我没有在这里使用src标记，因为我没有图像，但是如果打开DevTools（F12），您可以在控制台中看到alt标记中的数字，并且可以在HTML中看到alt标记的更改。）

更新2 此代码更加灵活（）：

问题是您使用的是不存在的字符串方法
endsWith（）

改用
indexOf（）

如果打开javaScript控制台，您可能会看到此错误

但是，您可以在String上创建一个
endsWith（）
方法，这可能会使代码更干净一些

查看此重构：

HTML

<body>
    <img id="Wins" src="images/0win.png" onclick="swap(this.src)" />
</body>

<img src="images/0win.png" id="Wins" onclick="swap('Wins')"/>
<img src="images/0win.png" id="Wins1" onclick="swap('Wins1')"/>
您会注意到，我将
document.getElementById（id）
拉入一个变量（
el
）。这减少了大量代码重复。我通过对两个图像使用相同的
swap
函数删除了更多的重复。两者之间唯一的区别是
id
，因此这被拉到函数的参数中。

我只想建议使用
switch
而不是4
，否则如果
s，您可以y此代码中有什么不起作用。您有任何错误吗？它只是默默地不起作用吗？您尝试过调试吗？endsWith不是javascript方法。请使用indexOf@MauricePerry嗯…src.prototype.endsWith确实存在！但感谢indexOf提示：P@Kyozumo-查看我的编辑，这将使您的代码更加简短、可读性更强，并且打火机（我只在第一次‘赢’时这么做，但你可以很容易地复制粘贴到另一次）@Kyozumo-我做了另一次编辑，使代码更加灵活

String.prototype.endsWith = function(str) {
    return this.indexOf(str) != -1
}

function swap(id) {
    var el = document.getElementById(id);
    if (el.src.endsWith('0win.png')) {
        el.src = "images/1win.png";
    } else if (el.src.endsWith('1win.png')) {
        el.src = "images/2win.png";
    } else if (el.src.endsWith('2win.png')) {
        el.src = "images/3win.png";
    } else if (el.src.endsWith('3win.png')) {
        el.src = "images/0win.png";
    }
}