3

JSON からデータを回復し、製品のリストを生成するページがあります。ユーザーは、親 ul を ul.fullview に変更するボタンをクリックすると、2 つの異なるスタイルを切り替えることができます。ul.fullview をオンにして製品を閲覧すると、クラス .highlighted を受け取った製品はより大きなサムネイルで表示され、他の製品はレイアウトに収まるように絶対位置を受け取ります。これはすべて、CSS と単純な tooggleClass() によって行われます。問題は、これら 2 つの異なるビュー内の mouseenter / mouseleave イベントにあります。デフォルト ビューを使用してブラウジングする場合、すべての製品に同じアニメーションが表示されます。親 ul が .fullview の場合、.highlighted 製品には別のアニメーションが必要です。動的に追加された要素を扱っているため、.hover() の代わりに .on() を使用する必要がありました。

$('div.products ul:not(.fullview) li:not(.highlighted)').hover(
  function () {
    $(this).find($('div.tooltip')).show();
    $(this).find($('div.fb-like')).fadeIn(150);
  }, 
  function () {
    $(this).find($('div.tooltip')).fadeOut(150);
    $(this).find($('div.fb-like')).fadeOut(150);
  }
);

$('li.highlighted').hover(
  function () {
    $(this).find($('div.description')).show();
    $(this).find($('div.fb-like')).fadeIn(150);
  }, 
  function () {
    $(this).find($('div.description')).fadeOut(150);
    $(this).find($('div.fb-like')).fadeOut(150);
  }
);

上記のコードは、要素が JavaScript によって追加されていない場合に機能するはずです。以下のスクリプトを使用して、デフォルトのビューを機能させることができました。

$('div.products ul').on({
    mouseenter: function () {
    $(this).find($('div.tooltip')).show();
    $(this).find($('div.fb-like')).fadeIn(150);
    },
    mouseleave: function () {
    $(this).find($('div.tooltip')).fadeOut(150);
    $(this).find($('div.fb-like')).fadeOut(150);
    }
}, 'li');

しかし、これらの行を追加すると、json データの読み込みが停止します。

$('div.products ul.fullview').on({
    mouseenter: function () {
    $(this).find($('div.description')).show();
    $(this).find($('div.fb-like')).fadeIn(150);
    },

    mouseleave: function () {
    $(this).find($('div.description')).fadeOut(150);
    $(this).find($('div.fb-like')).fadeOut(150);
    }
}, 'li.highlighted');

私は何を間違っていますか？

4

2 に答える 2

2

あなたが言っています：

親 ul を ul.fullview に変更します

ul.fullviewバインディングの時点ではul「フルビュー」クラスがないだけで動的になると思いますが、動的に変更されてクラスが作成されます。

これを試して：

$('div.products').on({
    mouseenter: function() {
        $(this).find($('div.description')).show();
        $(this).find($('div.facebook-like')).fadeIn(150);
    },

    mouseleave: function() {
        $(this).find($('div.description')).fadeOut(150);
        $(this).find($('div.fb-like')).fadeOut(150);
    }
}, 'ul.fullview li.highlighted');​
于 2012-08-17T20:57:06.250 に答える
1

便宜上、 JSFiddleに対する2 つの回答を組み合わせました。ブラケットとセレクターは、他の人の回答に従って調整されました。

于 2012-08-17T21:30:35.267 に答える