使用 jQuery 切换图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/340983/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Switching an image using jQuery
提问by Jon Tackabury
Is there a better, more jQuery-ish way of handling this image substitution?
有没有更好、更像 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");
回答by Josh Delsman
Why set a variable when it isn't needed?
为什么在不需要时设置变量？
$(obj).children("img").toggle(
function(){ $(this).attr("src", "Images/TreeExpand.gif"); },
function(){ $(this).attr("src", "Images/TreeCollapse.gif"); }
);
回答by BigJump
More jQueryish? Maybe! Clearer? I'm not sure!
更jQuery？也许！更清楚？我不知道！
var image = $(obj).children("img");
$(image).toggle(
function () { $(image).attr("src", "Images/TreeExpand.gif");},
function () { $(image).attr("src", "Images/TreeCollapse.gif");}
);
回答by redsquare
You could do something like this
你可以做这样的事情
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 in your question you do $(image) multiple times. Its better to cache the lookup in a var e.g var $image=$(obj).children("img"); then use the $image from there on in.
请注意，在您的问题中，您多次执行 $(image) 。最好将查找缓存在 var 中，例如 var $image=$(obj).children("img"); 然后从那里使用 $image 。
回答by duckyflip
Your imageobject would already be a jQUery instance so there is no need for you to pass it through $(...)again.
您的图像对象已经是一个 jQUEry 实例，因此您无需再次通过$(...)传递它。
A good practice is to prepend variables that are jquery instances with $ and use them directly thereafter.
一个好的做法是在作为 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");
回答by Cirieno
Wow. Answers come flying in, don't they? All of the above would work, but you could try this for a one-liner (it's untested)...
哇。答案纷至沓来，不是吗？以上所有方法都可以，但是您可以尝试将其用于单线（未经测试）...
image.setAttribute("src", "Images/Tree" + ((image.getAttribute("src").indexOf("Collapse")>0) ? "Expand" : "Collapse") + ".gif");
Update: I've just tested this and it works, so would the person who voted it down care to explain why they did that?
更新：我刚刚测试了这个并且它有效，那么投票否决它的人会关心解释他们为什么这样做吗？
回答by Aleris
Possible alternatives:
可能的替代方案：
- Use toggleClassand put the images in stylesheet as background images.
- Use 2 images and togglethem.
- 使用toggleClass并将图像放在样式表中作为背景图像。
- 使用 2 张图像并切换它们。
回答by Jeremy B.
Not really.
并不真地。
I know... extremely helpful answer. What you are doing is pretty succinct and I'm not so sure there would be anything to make it more "jQueryish" as you ask.
我知道......非常有帮助的答案。您正在做的事情非常简洁，我不太确定有什么可以使它更像您问的那样“jQueryish”。
now depending on how you are iterating through this if you are doing it to multiple image instances, that is where there might be some jQuery optimizations.
现在，如果您对多个图像实例进行迭代，则取决于您如何迭代，这就是可能有一些 jQuery 优化的地方。
