2

我遇到了问题，我尝试了几次但结果总是一样，我不知道我的代码有什么问题。点击右图会变成左图，点击左图就不会变成右图，这是为什么呢？这是代码：

    function changeImage() {

    if  (document.getElementById("changer").src == "imgs/left.gif")
    {
        document.getElementById("changer").src = "imgs/right.gif";
    }
    else 
    {
        document.getElementById("changer").src = "imgs/left.gif";
    }

}

和图像源代码在这里：

<img  src="imgs/right.gif" id="changer" onclick="changeImage()"/></a>

我需要这个功能：点击（右箭头图像），然后它会变成（左箭头图像）并再次点击相同（左箭头图像）将返回默认值，（右箭头图像）。

提前感谢您的时间和帮助。

4

8 回答 8

4

正如 Prabu 在他的回答中解释的那样，实际的 src 是绝对路径而不是相对路径。

要解决这个问题：

  • 将元素对象，即this作为参数传递给函数。
  • 在元素对象内（即在该函数中）创建一个变量bln 。element
<img src="imgs/right.gif" id="changer" onclick="changeImage(this)" />
                                                             ^ pass the element object             

 function changeImage(element) {
     element.src = element.bln ? "imgs/right.gif" : "imgs/left.gif";
     element.bln = !element.bln;  /* assigns opposite boolean value always */
 }

上述函数将切换图像 src，而不依赖于src属性中存在的值。

样品小提琴

顺便说一句，您也可以仅使用 CSS 执行此操作：

工作小提琴

于 2013-08-29T05:49:07.430 回答
3

嘿，您提到了问题，foldername/filename但是 document.getElementById("changer").src 给出了fullpathC:\Users\ws21\Desktop\imgs\right.gif

例如

 function changeImage() {

//its checking C:\Users\ws21\Desktop\imgs\right.gif=="imgs\left.gif"
        if  (document.getElementById("changer").src == "imgs/left.gif")
        {
            document.getElementById("changer").src = "imgs/right.gif";
        }
        else 
        {
            document.getElementById("changer").src = "imgs/left.gif";
        }

    }

所以它总是只执行 else 部分

于 2013-08-29T05:30:40.047 回答
2

尝试这个 ：

$("#changer").click(function(){
    imagePath = $("#changer").attr("src");
    if(imagePath == "http://behdasht.co/wp/imgs/left.gif"){
        $("#changer").attr("src", "http://behdasht.co/wp/imgs/right.gif");

    }else{
        $("#changer").attr("src", "http://behdasht.co/wp/imgs/left.gif");
    }
});

//Updated to use jquery completely

小提琴：http: //jsfiddle.net/8hGWZ/

http://jsfiddle.net/8hGWZ/2/（完整的jquery）

于 2013-08-29T05:22:49.750 回答
1 
function changeImage() {
    var src = document.getElementById("changer").src;   
var imgsrc = src.substring(src.lastIndexOf("/")+1);
if  (imgsrc == "left.gif")
{
    document.getElementById("changer").src = "imgs/right.gif";
    console.log('if'+document.getElementById("changer").src);
}
else 
{
    document.getElementById("changer").src = "imgs/left.gif";
    console.log('if'+document.getElementById("changer").src);
}

}

使用上面应该工作

小提琴演示

于 2013-08-29T05:16:31.003 回答
0

演示

HTML

<a/>
<img src="imgs/right.gif" id="changer" onclick="changeImage(this)" />
</a>

js

i=1;
function changeImage(el) {
    el.click=++i;
    el.src = ((el.click)%2 == 0) ? "imgs/right.gif" : "imgs/left.gif";
}
于 2013-08-29T05:23:08.870 回答
0

问题已解决。这是完整的答案：我们应该使用图像 URL 的完整路径，否则它将不起作用。

 function changeImage() {
    if  (document.getElementById("changer").src == "HTTP://YOURDOMAIN/left.gif")
    {
        document.getElementById("changer").src = "HTTP://YOURDOMAIN/right.gif";
    }
    else 
    {
        document.getElementById("changer").src = "HTTP://YOURDOMAIN/left.gif";
    }

}

特别感谢 Prabu Parthipan

还有另一种方法：

<img src="imgs/right.gif" id="changer" onclick="changeImage(this)" />

如果我们使用 (this) ，则无需使用图像 url 的完整路径。在这种情况下，我应该感谢格林先生......！

于 2013-08-29T06:29:57.323 回答
0

你所拥有的应该工作。

这是一个较短的版本：

function changeImage() {
    this.src = this.src == "imgs/left.gif" ? "imgs/right.gif" : "imgs/left.gif";
}
于 2013-08-29T05:14:03.380 回答
0

嘿，尝试 javascript 中图像的完整路径，例如

if  (document.getElementById("changer").src == "http://mydomain.com/imgs/left.gif")
{
    document.getElementById("changer").src = "http://mydomain.com/imgs/right.gif";
}

一些浏览器在 src 中使用完整的 url

或者你可以检查一下

  <img  src="http://behdasht.co/wp/imgs/right.gif" id="changer" onclick='javascript: this.src = this.src == "http://behdasht.co/wp/imgs/left.gif" ? "http://behdasht.co/wp/imgs/right.gif" : "http://behdasht.co/wp/imgs/left.gif";'/>
于 2013-08-29T05:25:29.777 回答