jquery에서 이미지 숨기기/표시

Question

하이퍼 링크를 클릭 할 때 이미지를 표시하거나 숨기는 방법?

<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

어떤 이미지를 숨기시겠습니까?

$("img").hide(); 

그렇지 않으면, 선택기를 사용하여, 당신은 포함 사업부의 자식 요소 인 모든 이미지를 찾을 수 있고, 사람들을 숨기기 : 모든 이미지 가정하면, 다음과 같은 작업을해야합니다.

그러나, 나는 강하게 당신이 JQuery와 문서를 읽을 권장합니다, 당신은 스스로를 알아 낸 수 : http://docs.jquery.com/Main_Page

Answer 2

당신이 대역폭을 클릭하고 viceversa에에 업로드 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> 

Answer 3

사용 the .css() jQuery manipulators

, 또는 당신이 핸들을 획득하고 나면 더 좋은 단지 이미지에 .show()/.hide()를 호출 (예 : $('#img' + id)).

나는 너에게 should not "javascript :"접두어가 붙은 자바 스크립트 처리기를 작성합니다.

Answer 4

나는 지금 이런 식으로해야만했다. 이미지 ID와

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

: 이미지 클래스 이름으로

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

: 나는 일을 결국

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

Answer 7

나는 이것이 이전 게시물입니다 알고 있지만 유용 할 수 있습니다 jQuery를 사용하여. NET 서버 측 이미지를 표시하려는 사람들을위한 것입니다.

약간 다른 논리를 사용해야합니다.

myServerimg.visible = false를 사용하여 이미지를 숨기면 $ ("# < % = myServerimg.ClientID %>") show()가 작동하지 않습니다.

대신, 서버 측에서 다음을 사용 :

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