在 jquery 中隐藏/显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4592870/
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
hide/show a image in jquery
提问by Rajeev
How to show/hide the image on clicking the hyperlink?
如何在单击超链接时显示/隐藏图像？
<script>
function getresource(id)
{
if(id==4)
{
//show image
}
else if(id==5)
{
//hide image
}
}
</script>
<a href="#" onclick="javascript:getresource('4');">Bandwidth</a>
<a href="#" onclick="javascript:getresource('5');">Upload</a>
<p align="center">
<img id="img3" src="/media/img/close.png" style="visibility: hidden;" />
<img id="img4" src="/media/img/close.png" style="visibility: hidden;" />
</p>
回答by TJHeuvel
What image do you want to hide? Assuming all images, the following should work:
你想隐藏什么图像？假设所有图像，以下应该有效：
$("img").hide();
Otherwise, using selectors, you could find all images that are child elements of the containing div, and hide those.
否则，使用选择器，您可以找到作为包含 div 的子元素的所有图像，并将它们隐藏。
However, i strongly recommend you read the Jquery docs, you could have figured it out yourself: http://docs.jquery.com/Main_Page
但是，我强烈建议您阅读 Jquery 文档，您可以自己弄明白：http: //docs.jquery.com/Main_Page
回答by sandeep kumar
With image class name:
使用图像类名称：
$('.img_class').hide(); // to hide image
$('.img_class').show(); // to show image
With image Id :
使用图像 ID ：
$('#img_id').hide(); // to hide image
$('#img_id').show(); // to show image
回答by Lightness Races in Orbit
Use the .css()jQuery manipulators, or better yet just call .show()/.hide()on the image once you've obtained a handle to it (e.g. $('#img' + id)).
使用了.css()jQuery的操纵，或更好，但只是调用.show()/.hide()一旦你得到它的句柄（例如图像$('#img' + id)）。
BTW, you should notwrite javascript handlers with the "javascript:" prefix.
顺便说一句，您不应该使用“javascript:”前缀编写 javascript 处理程序。
回答by Feras Al Sous
<script>
function show_image(id)
{
if(id =='band')
{
$("#upload").hide();
$("#bandwith").show();
}
else if(id =='up')
{
$("#upload").show();
$("#bandwith").hide();
}
}
</script>
<a href="#" onclick="javascript:show_image('bandwidth');">Bandwidth</a>
<a href="#" onclick="javascript:show_image('upload');">Upload</a>
<img src="img/im.png" id="band" style="visibility: hidden;" />
<img src="img/im1.png" id="up" style="visibility: hidden;" />
回答by A. Varma
I know this is an older post but it may be useful for those who are looking to show a .NET server side image using jQuery.
我知道这是一篇较旧的帖子，但它可能对那些希望使用 jQuery 显示 .NET 服务器端图像的人有用。
You have to use a slightly different logic.
您必须使用稍微不同的逻辑。
So, $("#<%=myServerimg.ClientID%>").show() will not work if you hid the image using myServerimg.visible = false.
因此，如果您使用 myServerimg.visible = false 隐藏图像，$("#<%=myServerimg.ClientID%>").show() 将不起作用。
Instead, use the following on server side:
相反，在服务器端使用以下内容：
myServerimg.Style.Add("display", "none")
回答by grinch
I had to do something like this just now. I ended up doing:
我刚才不得不做这样的事情。我最终做了：
function newWaitImg(id) {
var img = {
"id" : id,
"state" : "on",
"hide" : function () {
$(this.id).hide();
this.state = "off";
},
"show" : function () {
$(this.id).show();
this.state = "on";
},
"toggle" : function () {
if (this.state == "on") {
this.hide();
} else {
this.show();
}
}
};
};
.
.
.
var waitImg = newWaitImg("#myImg");
.
.
.
waitImg.hide(); / waitImg.show(); / waitImg.toggle();
回答by Poelinca Dorin
If you're trying to hide upload img and show bandwidth img on bandwidth click and viceversa this would work
如果您试图隐藏上传 img 并在带宽点击时显示带宽 img，反之亦然，这将起作用
<script>
function show_img(id)
{
if(id=='bandwidth')
{
$("#upload").hide();
$("#bandwith").show();
}
else if(id=='upload')
{
$("#upload").show();
$("#bandwith").hide();
}
return false;
}
</script>
<a href="#" onclick="javascript:show_img('bandwidth');">Bandwidth</a>
<a href="#" onclick="javascript:show_img('upload');">Upload</a>
<p align="center">
<img src="/media/img/close.png" style="visibility: hidden;" id="bandwidth"/>
<img src="/media/img/close.png" style="visibility: hidden;" id="upload"/>
</p>
