Question

首先发布在这里。

所以我的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，但是没有用。我不介意使用完整路径，但位置可能是我服务器上的相对位置。

里斯

Answer 1

var imgClickAndChange = document.getElementById("imgClickAndChange");

if (imgClickAndChange.src.indexOf("clear.jpg") !== -1){
 imgClickAndChange.src="full.jpg"
}else{
 imgClickAndChange.src="clear.jpg"
}

Answer 2

首先，您的html代码段中有clear.png，但是您的javascript中正在检查clear.jpg。你清理完毕后......

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

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

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

document.getElementById("imgClickAndChange").src.indexOf("clear.jpg") // numeric index of "clear.jpg" or -1 if not found

Answer 3

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

或者，使用indexOf进行测试。

Answer 4

我建议如下：

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

JS Fiddle demo

或者：

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

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

JS Fiddle demo

使其更易于扩展（允许您传入任何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 Fiddle demo

最后，删除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 Fiddle demo

参考文献：

Answer 5

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

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

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

    img.isOff = !img.isOff;
}

在jsfiddle

上查看此操作

JS Image onClick src问题

5 个答案: