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

现在我为每个缩略图Image都有单独的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如下所示，上面提到的代码保留在页面中，样式=“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停止工作，因为有两种类型的htmls。

请建议！

感谢。

最诚挚的问候， 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();
}

如何使用jquery或javascript在缩略图上隐藏和显示图像

3 个答案: