Question

是否有更好的，更多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

你可以做这样的事情

e.g

$(function()
    {
       $(obj)
       .children("img")
       .attr('src', swapImage );    
    });

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

N.B在你的问题中你多次做$（图像）。最好将查找缓存在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张图片和toggle张。

Answer 7

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

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

更新：我刚刚对此进行了测试并且有效，所以投票的人也要小心解释他们为什么会这样做？

使用jQuery切换图像

7 个答案: