画像ギャラリーで表示している画像が画像の下のアイコン(.fav)をクリックしてお気に入りとして選択されたときに、「アイコン(vert-flag)」を表示または非表示にするために使用するクリック機能があります。アイコンが変化して選択されたことを示し、お気に入り(vert-flag)が表示されます。これはうまく機能しますが、同時に別のミラーギャラリーの対応するサムネイル画像に同じお気に入りの設定を設定し、そこにもアイコン(vert-flag)を表示しようとしています。私の問題は、2番目のギャラリーに移動し、同時にそのサムネイルにマークを付ける方法を理解することです。
表示-非表示クリック機能を次のように実行します。
$(".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();