如何在点击时交换图像?

我想在点击时交换图像,在这里,如果m从向下图像点击向上,但如果点击该图像再次点亮图像… m geting some error- x.attr(“src”)is undefined

$(document).ready(function () { $('#sortdivlink').click(function () { var x = $("img[src$='../Images/Sort_down.png'][name='stCodeDSC']"); if (x.attr("SRC") == "../Images/Sort_down.png") { x.attr('src', x.attr('src').replace("../Images/Sort_down.png", "../Images/sort_up.png")); } else { x.attr('src', x.attr('src').replace("../Images/sort_up.png", "../Images/Sort_down.png")); } }); }); 

你可以使用带有background-image和尺寸的css类的

,并使用$(div).toggleClass(“new-image”)来使用更新的background-image

这将大大简化您的代码。

[编辑]

         

我想这是由于您使用的选择器分配x ,可能返回null。 我会考虑在图像中添加Id或CSS类,然后将选择器简化为以下内容:

 var x = $('img.sortDirectionImage'); 

或者,如果您知道sortdivlink元素只有一个图像,您只需在该元素的上下文中搜索img元素,例如:

 // within the click function scope var x = $('img', this); 

编辑

另外,我建议使用更多可识别的变量名称; 你可能知道x是什么,但下一个阅读你代码的人可能不会。

看看我很久以前写的脚本(没有任何jQuery):

 function changeImg(element) { var img = document.getElementById(element); if (img.src == "../images/expand.png") { // collapse img.src = "../images/collapse.png"; } else { // expand img.src = "../images/expand.png"; } } 

普通的HTML标记:

 ... 

也许它会对你有用……