JS Image onClick src问题

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

里斯

来源

2013-07-07 Rhys

使用正则表达式或split最后/后得到的URL部分和比较，为你对测试值。

或者，用indexOf进行测试。

来源

2013-07-07 09:18:50 Quentin

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

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

来源

2013-07-07 09:25:57 manraj82

首先，你必须在你的HTML片段clear.png，但在你的JavaScript被检查clear.jpg。你之后拿到清理......

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

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

或者你可以使用indexOf，如@ manraj82建议，以检查 “clear.jpg” 在imgClickAndChange的SRC属性存在：

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

来源

2013-07-07 09:51:18 Divey

我建议如下：

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。

参考文献：

来源

2013-07-07 09:57:34

您可以向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-07 10:14:53

JS Image onClick src问题

回答

相关问题