jquery - 如何更改图像 onclick javascript 函数？

Question

我遇到了问题，我尝试了几次但结果总是相同的，我不知道我的代码出了什么问题。如果你点击右图，它会变成左图，但如果你点击左图，它不会变成右图，为什么？这是代码:

    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>

我需要这个功能:单击(右箭头图像)，然后它将更改为(左箭头图像)，再次单击相同的(左箭头图像)将返回默认值(右箭头图像)。

预先感谢您的时间和帮助。

Answer 1

正如 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 属性中存在的值。

<强> Sample Fiddle

顺便说一句，您也可以仅使用 CSS 来做到这一点:

<强> Working Fiddle