1

我有一个单击功能，当通过单击图像下方的图标 (.fav) 将图像库中正在查看的图像选为收藏时，我可以使用它来显示或隐藏“图标（垂直标志）”。图标更改以指示它已被选中并显示收藏夹（垂直标志）。这很好用，但我也试图同时在单独的镜像库中的相应缩略图上设置相同的收藏设置，并在那里显示图标（垂直标志）。我的问题是弄清楚如何遍历第二个画廊并同时标记该缩略图。

显示隐藏点击功能：

$(".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();
4

0 回答 0