Question

我有一个点击功能，用于显示或隐藏图标库中正在查看的图像时，通过单击图像下的图标（.fav）来显示或隐藏'图标（vert-flag）' 。图标会发生变化，表示已选中，并显示收藏夹（vert-flag）。这很好但我也尝试在同一个单独的镜像库中的相应缩略图上设置相同的收藏夹设置，并在那里显示图标（vert-flag）。我的问题是弄清楚如何遍历第二个图库并同时标记该缩略图。

显示 - 隐藏点击功能：

$(".fav").live('click', function() {
    $(this).toggleClass('sticky')
           .removeClass('icon-heart-empty')
           .addClass('icon-check')
           .toggleClass('fav')
           .closest('.selectFav')
           .toggleClass('favorites');
    $(this).closest(".selectFav").children(".vert-flag").show();
});

$(".sticky").live('click', function() {
    $(this).toggleClass('fav')
           .removeClass('icon-check')
           .addClass('icon-heart-empty')
           .toggleClass('sticky')
           .closest('.selectFav')
           .toggleClass('favorites');
    $(this).closest(".selectFav").children(".vert-flag").hide();
});

主要图片的html选择为收藏：

<div id="book">
    <div class="selectFav" >
        <span class="vert-flag icon-heart icon-large" style="display:none;"></span>
        <h1>Wall</h1>
        <a href="slides/Wall.jpg"  title="Wall"><img  src="thumbs/Wall.jpg" alt="Wall" title="Wall"/></a>
         <div class="titles">
             <i class="fav icon-heart-empty"></i>
        </div>
    </div>
</div>

相应缩略图的html：

<div id="slider">
    <div class="item">Wall<br>
        <a href="#" title="Wall">
            <img src="thumbs/Wall.jpg"  alt="Wall" data-page="38" />
        </a>
        <span class="vert-flag icon-heart icon-large" style="display:none;"></span>
    </div>

我尝试了一些不同的东西，但我没有足够的经验来理解如何遍历dom来影响缩略图。我在点击功能中尝试了类似的功能而没有运气。

$(this).parents('#slider').closest(".item").children(".vert-flag-mini").show();

Jquery单击功能可以同时显示两个div中的图标

0 个答案: