jQuery交换的问题();
-
03-10-2019 - |
题
〜在我的文章页面上(http://www.adrtimes.squarespace.com/articles)我的每个条目都以一个在翻车上更改的图像开始。这很好。
但是,在我的主页上(http://www.adrtimes.squarespace.com),我正在加载未归类为视频的两篇最新文章,以及标记为视频的两篇最新文章。我正在使用jQuery Load()从文章页面中汲取内容。除了主页上的交换汇总外,一切都可以处理。我尝试将交换函数作为回调,但只有一个组或另一组可以正确滚动,而不是两组内容。我不确定问题是什么!
这是代码:
<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
图像时 mouseenter
, 并从 _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)
}
});
其他提示
如果您运行 $.swapimage()
第二次它可以自行禁用。因此,在回调中尝试以下方法:
$.swapImage("#LoadRecentVideos .swapImage");
不隶属于 StackOverflow