问题jQuery swapImage（）;

Question

〜在我的文章页面（http://www.adrtimes.squarespace.com/articles）我的每个条目都是以翻转时变化的图像开始的。这工作正常。

但是，在我的主页（http://www.adrtimes.squarespace.com）中，我加载了最近两篇未归类为视频的文章以及最近被标记为视频的两篇文章。我正在使用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改为_color.jpg，以及回来时，你mouseleave。

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

---

编辑：用活

版本（）

充满希望这将会为你做。 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");