JQuery swapImage() 的问题；

Question

~ 在我的文章页面 (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>

Answer 1

如果这不是您想要的，我很抱歉，但是自己进行交换确实非常简单。

我不知道你的选择器应该是什么，但是当你mouseenter时，这会抓取图像的src，并将其从_bw.jpg< /code> 到 _color.jpg，并在您鼠标离开 时返回。

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)
    }
});

Answer 2

如果您第二次运行 $.swapimage() 它会自行禁用，则会出现此情况。所以在回调中试试这个：

$.swapImage("#LoadRecentVideos .swapImage");