使用jQuery切换图像

是否有更好的，更多jQuery-ish方式来处理这种图像替换？

var image = $(obj).children("img"); if ($(image).attr("src") == "Images/TreeCollapse.gif") $(image).attr("src", "Images/TreeExpand.gif"); else $(image).attr("src", "Images/TreeCollapse.gif"); 

Answer 1

为什么在不需要时设置变量？

 $(obj).children("img").toggle( function(){ $(this).attr("src", "Images/TreeExpand.gif"); }, function(){ $(this).attr("src", "Images/TreeCollapse.gif"); } ); 

Answer 2

更多jQueryish？ 也许！ 更清晰？ 我不确定！

 var image = $(obj).children("img"); $(image).toggle( function () { $(image).attr("src", "Images/TreeExpand.gif");}, function () { $(image).attr("src", "Images/TreeCollapse.gif");} ); 

Answer 3

你可以这样做

例如

 $(function() { $(obj) .children("img") .attr('src', swapImage ); }); function swapImage(){ return ( $(this).attr('src') == "Images/TreeCollapse.gif" ? "Images/TreeExpand.gif" : "Images/TreeCollapse.gif"); } 

在你的问题中，你多次做$（图像）。 最好将查找缓存在var中，例如var $ image = $（obj）.children（“img”）; 然后使用那里的$ image。

Answer 4

您的图像对象已经是jquery实例，因此您无需再次通过$（…）传递它。

一个好的做法是将带有$的jquery实例的变量作为前缀，然后直接使用它们。

 var $image = $(obj).children("img"); if ($image.attr("src") == "Images/TreeCollapse.gif") $image.attr("src", "Images/TreeExpand.gif"); else $image.attr("src", "Images/TreeCollapse.gif"); 

Answer 5

并不是的。

我知道……非常有帮助的答案。 你正在做的是非常简洁的，我不太确定会有什么东西可以让你更加“jQueryish”。

现在取决于你如何迭代这个如果你正在对多个图像实例进行迭代，这可能是一些jQuery优化。

Answer 6

可能的选择：

• 使用toggleClass并将样式表中的图像作为背景图像。
• 使用2张图像并切换它们。

Answer 7

哇。 答案来了，不是吗？ 以上所有都可行，但你可以尝试这个单线程（它未经测试）……

 image.setAttribute("src", "Images/Tree" + ((image.getAttribute("src").indexOf("Collapse")>0) ? "Expand" : "Collapse") + ".gif"); 

更新：我刚刚对此进行了测试并且它可以正常工作，投票的人也会关心解释他们为什么会这样做？