JQuery swapImage（）存在问题；

~在我的文章页面（）中，我让每个条目都以一个在翻滚时更改的图像开始。这很好用

然而，在我的主页（）上，我加载了两篇不属于视频的最新文章，以及两篇标记为视频的最新文章。我使用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>

---

如果这不是您想要的，我深表歉意，但您自己进行交换非常简单

我不知道你的选择器应该是什么，但这会在你鼠标移动时抓取图像的

src

，并将其从

\u bw.jpg

更改为

\u color.jpg

，然后在你鼠标移动时返回

HTML:

---

编辑：

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

---

如果您第二次运行

$.swapimage（）

时，它会自动禁用。因此，在回调中尝试以下操作：

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

---

我对这个插件一无所知（除了我刚才看到的），但可能是因为您使用了完全相同的图像

src

进行两组交换，所以它会变得混乱吗？您能否尝试为不想交换的图像指定一个唯一的名称，看看这是否有帮助？（基本上是用新名称复制图像。）我可以从Firebug中突出显示的代码中看到，当您悬停时，图像的

src

发生了变化。但它似乎只是给了它原来的

src

两个不起作用的页面。。。但我还是尝试了一下，并将其设置为所有加载到主页中的图像都有唯一的名称，但都不起作用（出于好奇，这是

{src:'/storage/post images/Sample2_color.jpg'}

由您或插件添加？上面代码中标记为html的部分是我在需要图像的位置添加的部分。因此我将其放入，但它被修改为通过插件添加swapimageid。插件文档：这是一个很好的片段！谢谢！我切换到该版本，并且再次遇到相同的问题…在原始页面（），但在主页（）上使用jquery load（）加载时不起作用。在主页（）上加载内容时，我必须重新启动任何需要应用于内容的jquery，但它似乎无法按我尝试的方式工作。@VUELA-我将在一分钟内更新我的答案。jquery的

live（）

方法可能是一种方法。让我知道它是否有效。我在搜索之前与jquery load（）相关的问题时遇到了以下问题：……可能在图像实际加载完成之前应用了滚动脚本？第二个版本使用.live（）非常好用！！！非常感谢，你是一个保护程序。我想你是对的，我想你是对的。一个不检查该场景的插件不值得使用（在我看来）。同样感谢你的提示！我会保留这个方法（bug？）如果我再次遇到这个问题，请记住！我认为这是故意的，尽管似乎没有记录在案。不管怎样，我很高兴你得到了答案：）

$('.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)
    }
});

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