~ 在我的文章页面 ( 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>
最佳答案
如果这不是您想要的,我深表歉意,但您自己进行交换确实非常简单。
我不知道你的选择器到底应该是什么,但这会在你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)
});
编辑:
使用 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)
}
});
关于jquery - JQuery swapImage() 问题;,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2870511/