如何使用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下變得困惑，因為我的頁面現在將具有相同的代碼兩次。 呈現首次頁面時，請參見示例代碼。

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

現在，導航到其他選項卡並返回相同的選項卡后，頁面上的html如下所示，上面提到的代碼以style =“ display：none;”保留在頁面中。 添加了一個額外的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停止工作，因為存在兩種相同類型的html。

請提出建議！

謝謝。

最好的問候，MKS

Answer 1

試試這個

$("#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 2

我解決了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 3

生成HTML時，將onclick="myFunction('media_616165_ID0EV')"到縮略圖會很容易。

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