1

リンクがホバーされるまで画像をロードしたくないので、スクリプトはここにありますが、機能していません。誰かがそれを修正するのを手伝ってくれますか? 各リンクにイベント リスナーを追加し、マウスオーバーで画像を設定する関数を呼び出しました。もっと面白くするために、ここで遅延ロードを少しコピーして、data-original プロパティも使用できます:)

例: これは HTML コードです:

<li>
   <a href="#" class="tip_trigger">
      <img class="tip" alt="300 Grams"
              data-original="https://lh5.googleusom/-qCRpw.../300%2520.jpg"
              src='empty.gif' width="90" height="90"/>
      Alex
   </a>
</li>

次に、イベント リスナーを追加します。

コード：

// call for each element with the class 'tip' that's being hovered upon
$('.tip').hover(function()
{
   // retrieve the image inside this element
   var elem = $(this).find('img');

   // set the 'src' to the 'data-original' value
   elem.attr('src', elem.attr('data-original'));
});

ライブ デモについては、このページhttp://bloghutsbeta.blogspot.com/2012/04/testing-slidernav.htmlを参照してください 。スクリプトの上記の部分は、「A」カテゴリの最初の文字 ALEX にのみ追加されます。

4

4 に答える 4

11

.tipはすでに画像であるため、画像を見つけることはできません$(this).find('img');

代わりに試す

$('.tip_trigger').hover(function()
{
   // retrieve the image inside this element
   var elem = $(this).find('img');

   // set the 'src' to the 'data-original' value
   elem.attr('src', elem.data('original'));
});

.data()の代わりにメソッドも使用する.attr()

于 2012-04-23T13:15:15.917 に答える
1

var elem = $(this).find('img'); <-- これが画像の場合、画像を探しています。

ホバーをアタッチする要素を置き換えるか

$('.tip_trigger').hover(function()
{
   // retrieve the image inside this element
   var elem = $(this).find('img');

   // set the 'src' to the 'data-original' value
   elem.attr('src', elem.attr('data-original'));
});

またはそれをそのままにして、イメージを探さないでください

$('.tip').hover(function()
{
   var elem = $(this);

   // set the 'src' to the 'data-original' value
   elem.attr('src', elem.attr('data-original'));
});
于 2012-04-23T13:15:45.720 に答える
0

ホバーを img 要素にバインドしたため、img の子が見つかりません。これを使用するか、ホバーを .tip_trigger に変更します。

$('.tip_trigger').hover(function() // That should do the trick
{
   // retrieve the image inside this element
   var elem = $(this).find('img');

   // set the 'src' to the 'data-original' value
   elem.attr('src', elem.attr('data-original'));
});
于 2012-04-23T13:15:14.067 に答える
0

jQuery.find() は子を検索します。「.tip」セレクターですでに img を見つけています。

var elem = $(this);
于 2012-04-23T13:19:31.447 に答える