問題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");