jQuery で非常にシンプルな画像ブラウザを作成しようとしています。学習のためだけに行っています。現時点ではどのプロジェクトでも使用されません。
次のような画像とサムネイルがあります。
<div class="images">
<img src="http://www.dummyimage.com/400x200/222/fff.jpg" alt="" data-idi="1"/>
<img src="http://www.dummyimage.com/400x200/534/fff.jpg" alt="" data-idi="2"/>
<img src="http://www.dummyimage.com/400x200/345/fff.jpg" alt="" data-idi="3"/>
<img src="http://www.dummyimage.com/400x200/fed/111.jpg" alt="" data-idi="4"/>
</div>
<div class="thumbs">
<button data-idb="1"><img src="http://www.dummyimage.com/50x50/222/fff.jpg" alt="" /></button>
<button data-idb="2"><img src="http://www.dummyimage.com/50x50/534/fff.jpg" alt="" /></button>
<button data-idb="3"><img src="http://www.dummyimage.com/50x50/345/fff.jpg" alt="" /></button>
<button data-idb="4"><img src="http://www.dummyimage.com/50x50/fed/111.jpg" alt="" /></button>
</div>
サムネイルにカーソルを合わせると、上のメイン画像が置き換えられます。
jsfiddle.netで提示されているように、画像の「セット」と呼びましょう。
これを実現するために使用される簡単なスクリプトを次に示します。
$('#images img').hide().first().show();
$('#thumbs button').on( "mouseover", function(e) {
var idb = $(this).data("idb");
$('#images img').hide();
var img = $('#images').find("[data-idi='" + idb + "']").show();
});
次に、別の画像セットを追加し、スクリプトを.each()
関数でラップします。しかし、最初の画像のみを表示しようとすると、最初に問題が発生します。
var imgs = $('.images').hide();
$.each(imgs, function( index, val ) {
var firstImage = $(this).children(":first");
console.log(firstImage);
firstImage.show();
});
適切な画像はコンソール化されていますが、例外として表示されていません。jsfiddle.net のライブ例。この問題を手伝ってくれませんか?ティア