Question

我试图制作一个显示器，一旦点击（从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>

我能说的其他事情（我认为）

Answer 1

我会改用它：

if (document.getElementById("Wins1").src.indexOf('0win') != -1) {

纯粹的JS，可能更快

如果您坚持使用原型，我认为您应该使用.src.prototype.endsWith(...

的更新

我使你的代码更轻，更可变/更灵活/无论如何。

<强> HTML

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

<强> JS

function swap(src) { var num = parseInt(src.substr(src.indexOf('win')-1)); if (num == 3) { num = 0; } else { num++; } document.getElementById('Wins').src = 'images/'+num+'win.png'; }

工作示例： http://jsfiddle.net/pMMSL/

（我在这里没有使用src-tag，因为我没有图片，但如果你打开DevTools（F12），你可以在控制台中看到alt-tag中的数字，以及你可以在HTML中看到alt-tag的变化

更新2

此代码更灵活（ http://jsfiddle.net/pMMSL/1/ ）：

function swap(src) { var currentFile = src.substr(src.lastIndexOf('/')+1); var currentNum = parseInt(currentFile.substr(currentFile.indexOf('win')-1,1)); if (currentNum == 3) { var newNum = 0; } else { var newNum = currentNum+1; } var newFile = currentFile.replace(currentNum,newNum); document.getElementById('Wins').src = src.replace(currentFile,newFile); }

Answer 2

问题是您使用的是不存在的String方法endsWith()。

改为使用indexOf()。

如果你打开了javaScript控制台，你可能会看到这个错误。

你可以在String上创建一个endsWith()方法，这可能会使代码更清晰一些。

看看这个重构：

<强> HTML

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

<强> JS

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";
    }
}

您会注意到我将document.getElementById(id)拉出变量（el）。这减少了大量的代码重复。我通过对两个图像使用相同的swap函数删除了更多重复项。两者之间的唯一区别是id，因此被拉入函数的参数中。

使用JavaScript交换图像

2 个答案:

的更新

更新2