jquery – 如何更改图像onclick javascript函数?

前端之家收集整理的这篇文章主要介绍了jquery – 如何更改图像onclick javascript函数?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我遇到了问题,我尝试过几次但结果总是一样,我不知道我的代码有什么问题.如果单击右图,它将变为左图,但如果单击左图,则不会更改为右图,为什么?
这是代码
  1. function changeImage() {
  2.  
  3. if (document.getElementById("changer").src == "imgs/left.gif")
  4. {
  5. document.getElementById("changer").src = "imgs/right.gif";
  6. }
  7. else
  8. {
  9. document.getElementById("changer").src = "imgs/left.gif";
  10. }
  11.  
  12. }

和图像src代码在这里:

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

我需要这个功能
单击(右箭头图像),然后它将变为(左箭头图像)并再次单击相同(左箭头图像)将返回默认值(右箭头图像).

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

解决方法

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

解决这个问题:

>将元素对象,即this作为参数传递给函数.
>在元素对象内创建变量bln,即该函数中的元素.

  1. <img src="imgs/right.gif" id="changer" onclick="changeImage(this)" />
  2. ^ pass the element object
  1. function changeImage(element) {
  2. element.src = element.bln ? "imgs/right.gif" : "imgs/left.gif";
  3. element.bln = !element.bln; /* assigns opposite boolean value always */
  4. }

上面的函数将切换图像src,而不依赖于src属性中存在的值.

Sample Fiddle

顺便说一句,您也可以使用CSS执行此操作:

Working Fiddle

猜你在找的jQuery相关文章