مشكلة مع 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

اعتذاري إذا لم يكن هذا ما تريده ، لكن من السهل جدًا القيام بمبادلة خاصة بك.

لا أعرف بالضبط ما الذي يجب أن يكون عليه محددك ، لكن هذا سيحصل على src من الصورة عندما تكون mouseenter, وتغييره من _bw.jpg إلى _color.jpg, والعودة عندما تكون mouseleave.

لغة البرمجة:

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