Javascript If/Else 语句更改 img src
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4599511/
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
Javascript If/Else statement change img src
提问by technopeasant
I've got a drop functioning dynamic drop down menu that I'd like to add a little more functionality to. The menu is the page navigation and hovering over a link changes the source of an image in the content area, reflecting the active link. It's a simple attr(src) change.
我有一个下拉功能动态下拉菜单，我想向其中添加更多功能。菜单是页面导航，将鼠标悬停在链接上会更改内容区域中图像的来源，反映活动链接。这是一个简单的 attr(src) 更改。
I've added some code to fade the active image out, change the source back to the default, and fade it and back in upon leaving the menu, but would like to frame that code within an If/Else statement; preventing the image from fading out and back in if it's source is unchanged from the default.
我添加了一些代码来淡出活动图像，将源更改回默认值，并在离开菜单时将其淡入并重新显示，但想在 If/Else 语句中构建该代码；如果图像的源与默认值保持不变，则防止图像淡出和重新出现。
The syntax seems correct, but the function is not working correctly. I'm relatively new and am likely missing something. I'd greatly appreciate any advice for functional, more reliable code!
语法似乎正确，但该功能无法正常工作。我比较新，可能会遗漏一些东西。我非常感谢任何有关功能性，更可靠代码的建议！
Thank you for your time, Daniel
谢谢你的时间，丹尼尔
The function embedded within the else statement (fade out, change source, fade in) works as I'd like it to.
嵌入在 else 语句中的函数（淡出、更改源、淡入）按我的意愿工作。
$("#trigger").mouseleave(function(){
var img = $("#img_home");
if (img.src = "Images/IMG_4663_bw.jpg"){
img.noop();
} else {
img.fadeOut(1000, function(){
img.attr("src","Images/IMG_4663_bw.jpg");
img.fadeIn(1000);
});
}
});
回答by deceze
if (img.src = "Images/IMG_4663_bw.jpg")
You're assingingthe value, you need the ==operator, not the =operator.
If you're only looking for the elsecondition though, just inverse the condition:
您正在分配价值，您需要==运算符，而不是=运算符。
如果您只是在寻找else条件，只需反转条件：
if (img.attr('src') != "Images/IMG_4663_bw.jpg") {
// fade and stuff
}
回答by SLaks
imgis a jQuery object.
You need to access its attributes by calling img.attr('src').
img是一个 jQuery 对象。
您需要通过调用访问其属性img.attr('src')。
Your ifcondition assignsthe imgproperty; to check for equality, you need to use the ==(equality) or ===(strict equality) operators.
您的if条件分配了img财产；要检查相等性，您需要使用==（相等）或===（严格相等）运算符。
jQuery's noopmethod is a static method; you call it by writing jQuery.noop().
jQuery 的noop方法是静态方法；你通过写作来称呼它jQuery.noop()。
Finally, there's no point in calling noop()at all. First of all, there's nothing wrong with an empty pair of braces with no statements inside: if (something) { } else { ... }.
Also, you can just invert the ifcondition and get rid of the else:
最后，打电话根本没有意义noop()。首先，一对空大括号没有任何问题，里面没有语句：if (something) { } else { ... }。
此外，您可以反转if条件并摆脱else：
if (img.attr("src") === "Images/IMG_4663_bw.jpg") {
img.fadeOut(1000, function() {
img.attr("src", "Images/IMG_4663_bw.jpg").fadeIn(1000);
});
}
回答by Manny Calavera
Try
尝试
$("#trigger").mouseleave(function(){
var img = $("#img_home");
if (img.src == "Images/IMG_4663_bw.jpg"){
img.noop();
}
else {
img.fadeOut(1000,function(){
img.attr("src","Images/IMG_4663_bw.jpg");
img.fadeIn(1000);
});
}
});
The difference is comparing that source with the image path string. It should be ' == '
不同之处在于将该源与图像路径字符串进行比较。它应该是'=='
回答by user113716
Syntax is incorrect. You need ==in the if()statement instead of =, which does an assignment instead of a comparison.
语法不正确。您需要==在if()语句中代替=，它执行赋值而不是比较。
Also, in order to directly access the srcproperty, you need to do it from the DOM element. You can use [0]to get the first imgfrom the jQuery object.
此外，为了直接访问该src属性，您需要从 DOM 元素进行访问。您可以使用[0]来img从 jQuery 对象中获取第一个。
if (img[0].src == "Images/IMG_4663_bw.jpg"){
$.noop(); // The noop is called from the global jQuery object.
//...
