2

〜私の記事ページ（http://www.adrtimes.squarespace.com/articles）では、各エントリはロールオーバー時に変化する画像で始まります。これは正常に機能しています。

ただし、私のホームページ（http://www.adrtimes.squarespace.com）では、ビデオとして分類されていない最新の2つの記事と、ビデオとしてタグ付けされている最新の2つの記事を読み込んでいます。jQuery load（）を使用して、記事ページからコンテンツを取得しています。ホームページのswapImageロールオーバーを除いて、すべて問題なく動作します。swapImage関数をコールバックとして含めようとしましたが、コンテンツの両方のグループではなく、どちらか一方のグループのみが適切にロールオーバーします。何が問題なのかわからない!!

コードは次のとおりです。

<script type="text/javascript">
<!--

$(function(){ 

$.swapImage(".swapImage");

/* Homepage */
// load recent articles
$("#LoadRecentArticles").load("/articles/ .list-journal-entry-wrapper .journal-entry-wrapper:not(.category-video)", function(){ 
  //callback...
  $("#LoadRecentArticles .journal-entry-wrapper").wrapAll('<div class="list-journal-entry-wrapper" />');
  $("#LoadRecentArticles .journal-entry-wrapper:gt(1)").remove();
  // modify Read More tag
  $('.journal-read-more-tag a:contains(Click to read more ...)').each(function(){ 
      var str = $(this).html(); 
      $(this).html(str.replace('Click to read more ...','Continue reading—')); 
  });
  $.swapImage(".swapImage"); 
});

// load recent videos
$("#LoadRecentVideos").load("/articles/category/video .list-journal-entry-wrapper", function(){ 
  //callback...
  $("#LoadRecentVideos .journal-entry-wrapper:gt(1)").remove();
  $('<div class="VideoTag">—video</div>').insertBefore("#LoadRecentVideos .category-video .body img");
  // modify Read More tag
  $('.journal-read-more-tag a:contains(Click to read more ...)').each(function(){ 
      var str = $(this).html(); 
      $(this).html(str.replace('Click to read more ...','Continue reading—')); 
  });
  $.swapImage(".swapImage");
}); 


}); 
-->
</script>

そして、これが記事エントリの画像のhtmlのサンプルです。

<a href="/articles/2010/5/6/article-title-goes-here.html"><img class="swapImage {src: '/storage/post-images/Sample2_color.jpg'}" src="/storage/post-images/Sample2_bw.jpg" /></a>
4

2 に答える 2

1

これがあなたが望むものではない場合は申し訳ありませんが、独自のスワップを行うのは非常に簡単です。

セレクターがどうあるべきか正確にはわかりませんが、これはsrcのときに画像のを取得し、 からにmouseenter変更し、のときに元に戻します。_bw.jpg_color.jpgmouseleave

HTML:

<img class='imageToSwap' src="http://adrtimes.squarespace.com/storage/post-images/Sample2_bw.jpg">

jQuery:

    $('.imageToSwap').hover(function() {
        var $th = $(this);
        var src = $(this).attr('src');
        var newSrc = src.replace(/_bw.jpg/, '_color.jpg');
        $th.attr('src', newSrc)
    },
    function() {
        var $th = $(this);
        var src = $(this).attr('src');
        var newSrc = src.replace(/_color.jpg/, '_bw.jpg');
        $th.attr('src', newSrc)
    });

編集：

live() を使用したバージョン

うまくいけば、これでうまくいくでしょう。jQuery のlive()関数は、ページの読み込み後に DOM に動的に追加された要素のイベントを管理します。

試してみて、どうなるか教えてください。

$('.imageToSwap').live('mouseover mouseout', function(event) {
    var $th = $(this);
    var src = $(this).attr('src');
    if (event.type == 'mouseover') {
      var newSrc = src.replace(/_bw.jpg/, '_color.jpg');
      $th.attr('src', newSrc)
    } else {
      var newSrc = src.replace(/_color.jpg/, '_bw.jpg');
      $th.attr('src', newSrc)
    }
});
于 2010-05-20T02:42:07.957 に答える
0

2回目に実行すると、自動的$.swapimage()に無効になります。したがって、コールバックでこれを試してください。

$.swapImage("#LoadRecentVideos .swapImage");
于 2010-05-20T03:18:24.883 に答える