0

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 のライブ例。この問題を手伝ってくれませんか？ティア

4

4 に答える 4

1

http://jsfiddle.net/hsuc8/14/をご覧ください

コードの一部を変更しました。

編集：フィルター機能を使用するようにコードを変更したため、以前のURLを変更しました。

于 2012-06-27T19:12:44.660 に答える
1

あなたの答えをありがとう、私はそれらすべてに賛成票を投じました。スクリプトを改善することができたので、HTML 構造は次のようになります。

<div class="images" data-set='1'>
  <img src="http://lorempixel.com/400/200/sports/1/" alt="" data-idi="a1" />
  <img src="http://lorempixel.com/400/200/sports/2/" alt="" data-idi="a2" />
  <img src="http://lorempixel.com/400/200/sports/3/" alt="" data-idi="a3" />
  <img src="http://lorempixel.com/400/200/sports/4/" alt="" data-idi="a4" />
</div>
<div class="thumbs" data-set="1">
  <button data-idb="a1"><img src="http://lorempixel.com/50/50/sports/1/" alt="" /></button>
  <button data-idb="a2"><img src="http://lorempixel.com/50/50/sports/2/" alt="" /></button>
  <button data-idb="a3"><img src="http://lorempixel.com/50/50/sports/3/" alt="" /></button>
  <button data-idb="a4"><img src="http://lorempixel.com/50/50/sports/4/" alt="" /></button>   
</div>

JS スクリプトは次のようになります。

    var imgs = $('.images');
    $('.images img').hide()
    $.each(imgs, function(index, val) {
        $(val).children(":first").show();
        $('.thumbs button').on( "mouseenter", function(e) {
             var idb = $(this).data("idb"),
                 set = $(this).parent().data("set");
             $('body').find("[data-set='" + set + "']").children("img").hide();
             var img = $('.images').find("[data-idi='" + idb + "']").show();
        });
    });

そして実用例。

于 2012-06-27T21:24:11.027 に答える
1

親.images要素はすでに非表示になっています。

を呼び出すと.show()、非表示の親内に要素が表示されます。

<img>と書いて要素自体を選択する必要があります$('.images img')。

于 2012-06-27T18:34:28.903 に答える
1

すべての画像を非表示にしてから、最初の画像を表示します。

$('.images img').hide().first().show()
于 2012-06-27T18:39:49.047 に答える