如何隱藏和顯示縮略圖上的圖像點擊使用jquery或javascript

Question

我正在嘗試使用javascript/jquery。

我有下面的HTML，我想在圖像鏈接的「onclick」事件工作。

<div id="galleryContainer"> 
    <ul class="galleryThumbnails"> 
     <li><a href="/99/english/destinations_offers/destinations/asiapacific/india/newdelhi/photo.aspx?item=media_616165_ID0EV&amp;menu=image_616165#mplayer_616165"> 
      <img width="70" height="56" src="http://corp.com/99/english/images/thumb_616143_tcm481-616166.jpg" 
       class="mpMenuItemSelected" id="thumb_616165_ID0EV" title="New Delhi Zoo" alt="New Delhi Zoo"></a> 
     </li> 
     <li><a href="/99/english/destinations_offers/destinations/asiapacific/india/newdelhi/photo.aspx?item=media_616165_ID0E3&amp;menu=image_616165#mplayer_616165"> 
      <img width="70" height="56" src="http://corp.com/99/english/images/thumb_616146_tcm481-616168.jpg" 
       class="mpMenuItemOff" id="thumb_616165_ID0E3" title="New Delhi Zoo" alt="New Delhi Zoo"></a> 
     </li> 
     <li><a href="/99/english/destinations_offers/destinations/asiapacific/india/newdelhi/photo.aspx?item=media_616165_ID0EDB&amp;menu=image_616165#mplayer_616165"> 
      <img width="70" height="56" src="http://corp.com/99/english/images/redfort_tcm481-616158.jpg" 
       class="mpMenuItemOff" id="thumb_616165_ID0EDB" title="New Delhi RedFort" alt="New Delhi RedFort"></a> 
     </li> 
    </ul>  
     <div id="media_616165_ID0EV" class="galleryImage"> 
     <img width="390" height="312" alt="New Delhi Zoo" title="New Delhi Zoo" src="http://corp.com/99/english/images/10894_tcm481-616143.jpg"></div> 

    <div style="display: none;" id="media_616165_ID0E3" class="galleryImage"> 
     <img width="390" height="312" alt="New Delhi Zoo" title="New Delhi Zoo" src="http://corp.com/99/english/images/deer_tcm481-616146.jpg"></div> 

    <div style="display: none;" id="media_616165_ID0EDB" class="galleryImage"> 
     <img width="390" height="312" alt="New Delhi RedFort" title="New Delhi RedFort" src="http://corp.com/99/english/images/redfort_tcm481-616157.jpg"></div>   
</div> 

在上面HTML，我有縮略圖（請參閱UL）例如

<img width="70" height="56" src="http://corp.com/99/english/images/thumb_616143_tcm481-616166.jpg" 
       class="mpMenuItemSelected" id="thumb_616165_ID0EV" title="New Delhi Zoo" alt="New Delhi Zoo"> 

每一個縮略圖，它會顯示在現在，我已經得到了獨立galleryImage DIV部分點擊縮略圖圖像。例如對於上面的縮略圖，有

<div id="media_616165_ID0EV" class="galleryImage"> 
<img width="390" height="312" alt="New Delhi Zoo" title="New Delhi Zoo" src="http://corp.com/99/english/images/10894_tcm481-616143.jpg"></div> 

我想按照縮略圖點擊來隱藏和顯示圖像。

編輯：

我有標籤的功能鏈接第一時間時，頁面呈現以下@Rahul代碼工作完美，但航行的任何選項卡，再回來就停止工作的原因後，是在相同的選項卡上回來後，我以前的jQuery代碼添加和具有相同內容的額外div，在jquery下面感到困惑，因爲我的頁面現在將具有相同的代碼兩次。第一次頁面渲染時請參閱示例代碼。導航到其他標籤和回來同一標籤，現在html頁面上之後立即

<div class="tabs-container" id="tab-container"> 
top above html is rendered here 
</div> 

是如下，上述代碼保留在那裏在頁面樣式=「顯示：無;」一個額外的div被添加到播放選項卡功能：

<div class="tabs-container" id="tab-container" style="display: none;"> 
top above html is rendered here 
</div> 
<div id="divContenttab5" style="display: block;" class="dynDiv"> 
    <div class="tabs-container" id="tab-container"> 
     top above html is rendered here 
</div> 
</div> 

現在下面的Jquery停止工作，因爲有兩個相同類型的HTMLS的。

請建議！

謝謝。

最好的問候， MKS

Answer 1

我解決我的CSS類來回切換的問題，我改變了由@Rahul給出的代碼，請看看，並提出任何更改。

$("#galleryContainer ul.galleryThumbnails li img").click(function() { 
    var idArr = this.id.split('_'); 
    var divID = "media_" + idArr[1] + "_" + idArr[2]; 
    $("#galleryContainer ul.galleryThumbnails li img").each(function() { 
     if ($(this).is('.mpMenuItemSelected')) { 
      $(this).removeClass('mpMenuItemSelected'); 
      $(this).addClass('mpMenuItemOff'); 
     } 
    }); 
    $("div.galleryImage").hide(); 
    $("#" + divID).show(); 
}); 

Answer 2

試試這個

$("#galleryContainer ul.galleryThumbnails li img").click(function(){ 
    var idArr = this.id.split('_'); 
    var divID = "media_" + idArr[1] + "_" + idArr[2]; 

    $("div.galleryImage").hide(); 

    $("#" + divID).show(); 
}); 

如果你的HTML元素是動態生成的，那麼你可以使用此代碼，它使用.live()事件。

$("#galleryContainer ul.galleryThumbnails li img").live("click", function(){ 
    var idArr = this.id.split('_'); 
    var divID = "media_" + idArr[1] + "_" + idArr[2]; 

    $("div.galleryImage").hide(); 

    $("#" + divID).show(); 
}); 

Answer 3

當它生成的HTML它很容易增加onclick="myFunction('media_616165_ID0EV')"的縮略圖。

myFunction(media_id){ 
$(media_id).show(); 
}