使用 jQuery 切换图像答案

【问题标题】：Switching an image using jQuery使用 jQuery 切换图像
【发布时间】：2010-09-25 08:30:21
【问题描述】：

是否有更好、更 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");

【问题讨论】：

标签： jquery image

【解决方案1】：

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

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

【讨论】：

太棒了！我不知道 jQuery.toggle(fn1, fn2, ...)
根据您要调用obj 的次数，您可能只想将obj 等于children("img") ，因为这是另一个可能不需要调用的变量。不过，不确定其背后的逻辑。你的电话:)
我喜欢！我也不知道那个切换参数集。谢谢！
这是一个很棒的功能，但是当我使用它时，如果触发它，它只会每隔一次切换一次（我认为）。我已经将一个函数绑定到图像的单击事件，在该函数中，我 .toggle 一个 div 和我 .toggle 图像 src，就像这样。每次我单击 div 都是 .toggle:ed 但图像仅每隔一次交换一次，同时显示 div。有什么想法吗？
@Cros - 同上，第二次点击后图像交换，然后似乎卡住了

【解决方案2】：

更多 jQueryish？可能是！更清晰？我不确定！

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

【讨论】：

你不需要第二个$(image)。您可以拨打image.toggle(...)

【解决方案3】：

你可以这样做

例如

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

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

注意，在您的问题中，您多次执行 $(image) 。最好将查找缓存在 var 中，例如 var $image=$(obj).children("img");然后使用 $image 从那里开始。

【讨论】：

【解决方案4】：

您的 image 对象已经是 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");

【讨论】：

【解决方案5】：

不是真的。

我知道...非常有帮助的答案。您正在做的事情非常简洁，我不确定是否有任何东西可以使它像您问的那样更加“jQueryish”。

现在，如果您对多个图像实例执行此操作，则取决于您如何迭代，这可能是一些 jQuery 优化的地方。

【讨论】：

【解决方案6】：

可能的替代方案：

使用toggleClass 并将图片作为背景图片放入样式表中。
使用 2 张图片并 toggle 它们。

【讨论】：

【解决方案7】：

哇。答案飞来飞去，不是吗？以上所有方法都可以，但是您可以尝试将其用于单线（未经测试）...

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

更新：我刚刚对此进行了测试并且它有效，那么投票否决它的人会关心解释他们为什么这样做吗？

【讨论】：