1

第一次在这里发帖。

所以我的 HTML 和 PHP 非常好，但在 JS 上失败了。我正在尝试使用图像进行简单的切换。

HTML：

<img src="clear.png" id="imgClickAndChange" onclick="changeImage()">

JS：

<script language="javascript">
function changeImage() {

    if (document.getElementById("imgClickAndChange").src == "clear.jpg") 
    {
        document.getElementById("imgClickAndChange").src = "full.jpg";
    }
    else 
    {
        document.getElementById("imgClickAndChange").src = "clear.jpg";
    }
}

此代码不起作用，因为脚本正在接收 src 作为其完整路径，而不仅仅是“clear.jpg”。不知道如何解决这个问题。我试过使用 substr，但没有用。我不介意使用完整路径，但该位置在我的服务器上可能是相对的。

里斯

4

5 回答 5

1

首先，你有clear.png你的 html 片段，但正在检查clear.jpg你的 javascript。搞清楚之后...

您可以使用getAttribute方法检查属性的“原始”内容：

document.getElementById("imgClickAndChange").getAttribute('src'); // clear.png

或者您可以使用indexOf，正如@manraj82 建议的那样，检查“clear.jpg”是否存在于 imgClickAndChangesrc 属性中：

document.getElementById("imgClickAndChange").src.indexOf("clear.jpg") // numeric index of "clear.jpg" or -1 if not found
于 2013-07-07T09:51:18.790 回答
1 
var imgClickAndChange = document.getElementById("imgClickAndChange");

if (imgClickAndChange.src.indexOf("clear.jpg") !== -1){
 imgClickAndChange.src="full.jpg"
}else{
 imgClickAndChange.src="clear.jpg"
}
于 2013-07-07T09:25:57.633 回答
0

使用正则表达式或split获取最后一个 URL 部分，/并将其与您正在测试的值进行比较。

或者，使用indexOf.

于 2013-07-07T09:18:50.577 回答
0

您可以向 HtmlElement 注入一个标志来存储状态。

var img = document.getElementById('toggle_img');

img.onclick = function()
{
    img.src = img.isOff ? 'on.png' : 'off.png';

    img.isOff = !img.isOff;
}

在jsfiddle上查看它的实际应用

于 2013-07-07T10:14:53.290 回答
0

我建议如下：

function changeImage () {
    var img = document.getElementById('imgClickAndChange'),
        src = img.src;
    img.src = src.indexOf('clear') > -1 ? 'full.png' : 'clear.png';
}

JS 小提琴演示。

或者：

function changeImage() {
    var img = document.getElementById('imgClickAndChange'),
        src = img.src;

    img.src = src.replace(/(clear)|(full)/, function (a) {
        return a == 'clear' ? 'full' : 'clear';
    });
}

JS 小提琴演示。

为了使其更易于扩展（允许您传入任何img元素，并使用任意长度的图像/URL 进行切换）：

function changeImage(el) {
    var self = el,
        src = self.src,
        toggleBetween = self.getAttribute('data-images').split(',');
    for (var i = 0, len = toggleBetween.length; i < len;  i++) {
        if (src.indexOf(toggleBetween[i]) > -1) {
            self.src = (i + 1 == len ? toggleBetween[0] : toggleBetween[i + 1]) + '.png';
        }
    }
}

使用 HTML：

<img src="clear.png" id="imgClickAndChange" data-images="clear,full,arbitrary,other,images" onclick="changeImage(this)" />

JS 小提琴演示。

最后，要移除onclick事件处理程序，将事件处理程序绑定在脚本中，而不是在元素本身中，以减少使用突兀（且难以维护）的 JavaScript：

function changeImage(el) {
    var self = this,
        src = self.src,
        toggleBetween = self.getAttribute('data-images').split(',');
    for (var i = 0, len = toggleBetween.length; i < len;  i++) {
        if (src.indexOf(toggleBetween[i]) > -1) {
            self.src = (i + 1 == len ? toggleBetween[0] : toggleBetween[i + 1]) + '.png';
        }
    }
}

var elem = document.getElementById('imgClickAndChange');
elem.addEventListener('click', changeImage);

<img src="clear.png" id="imgClickAndChange" data-images="clear,full,arbitrary,other,images" />

JS 小提琴演示。

参考：

于 2013-07-07T09:57:34.753 回答