Ẩn/hiển thị hình ảnh trong jquery

Question

Làm cách nào để hiển thị/ẩn hình ảnh khi nhấp vào liên kết?

<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> 

Answer 1

Bạn muốn ẩn hình ảnh nào? Giả sử tất cả hình ảnh, sau đây nên làm việc:

$("img").hide(); 

Nếu không, sử dụng bộ chọn, bạn có thể tìm thấy tất cả những hình ảnh mà là phần tử con của div chứa và ẩn những.

Tuy nhiên, tôi đề nghị bạn đọc các tài liệu Jquery, bạn có thể đã figured it out bản thân: http://docs.jquery.com/Main_Page

Answer 2

Nếu bạn đang cố gắng để che giấu img tải lên và hiển thị băng thông img trên băng thông nhấp chuột và ngược lại này sẽ làm việc

<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> 

Answer 3

Sử dụng the .css() jQuery manipulators, hoặc tốt hơn là chỉ cần gọi .show()/.hide() vào hình ảnh khi bạn đã thu được một xử lý cho nó (ví dụ $('#img' + id)).

BTW, bạn should not viết trình xử lý javascript với tiền tố "javascript:".

Answer 4

Tôi phải làm điều gì đó như thế này ngay bây giờ. Tôi đã kết thúc thực hiện:

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(); 

Answer 5

<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;" /> 

Answer 6

Với tên lớp ảnh:

$('.img_class').hide(); // to hide image 
$('.img_class').show(); // to show image 

Với Id ảnh:

$('#img_id').hide(); // to hide image 
$('#img_id').show(); // to show image 

Answer 7

Tôi biết đây là một bài cũ nhưng nó có thể hữu ích cho những người đang tìm kiếm để hiển thị một hình ảnh bên máy chủ .NET bằng cách sử dụng jQuery.

Bạn phải sử dụng logic hơi khác.

Vì vậy, $ ("# <% = myServerimg.ClientID%>"). Show() sẽ không hoạt động nếu bạn ẩn hình ảnh bằng myServerimg.visible = false.

Thay vào đó, sử dụng sau đây trên phía máy chủ:

myServerimg.Style.Add("display", "none")