CSS属性不适用于jQuery无限滚动中的附加项目
Posted
技术标签:
【中文标题】CSS属性不适用于jQuery无限滚动中的附加项目【英文标题】:CSS properties not applied to appended items in jQuery infinite scroll 【发布时间】:2014-10-06 06:14:12 【问题描述】:我正在使用 Drupal Views 将带有 this 无限滚动脚本的内容加载到砖石风格的项目网格中。
它无限滚动,但附加的项目不保留原始项目的 CSS 属性。我不确定为什么会这样。
此外,我正在使用 jQuery 悬停效果将内容“浮动”在我的图像上。这是非常简单的代码。我无法想象它对这个问题有任何影响,但以防万一:
悬停效果的jQuery
$j('div.blog-list').on(".blog-thumbs-animate").hover(function()
$j("img", this).stop().animate(opacity: 0.9,queue:false,duration:75);
$j(".bhover", this).animate(opacity: 0.9,queue:false,duration:75);
, function()
$j("img", this).stop().animate(opacity: 1,queue:false,duration:75);
$j(".bhover", this).animate(opacity: 0,queue:false,duration:75);
);
用于砌体和无限滚动的jQuery:
<script>
(function($)
var $container = $('.blog-list');
$container.imagesLoaded(function($)
$container.masonry(
itemSelector: 'div.pmason',
columnWidth: 320
);
(jQuery));
$container.infinitescroll(
navSelector : '.pager', // selector for the paged navigation
nextSelector : '.pager-next a', // selector for the NEXT link (to page 2)
itemSelector : '.blog-list .node', // selector for all items you'll retrieve
animate : true,
loading:
finishedMsg: 'No more pages to load.',
,
// trigger Masonry as a callback
function( newElements )
// hide new items while they are loading
var $newElems = $( newElements ).css( opacity: 0 );
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function()
// show elems now they're ready
$newElems.animate( opacity: 1 );
$container.masonry( 'appended', $newElems, true );
);
);
)(jQuery);
</script>
编辑:这是 CSS
.blist .pmason width:319px; margin-right:1px; margin-bottom:1px; background:#FFF !important;
.blist .last margin-bottom:1px !important; margin-right:1px !important;
.blog-thumbs-animate position:relative !important;
.blist .bhover opacity:0; background:#f4f4f4; width:319px; position:absolute; bottom:0; left:0; height:100% !important;
.bhover .inside padding:20px;
谁能帮忙?
谢谢!
【问题讨论】:
CSS 在哪里?或者“CSS”意味着这个 javascript 悬停效果? 【参考方案1】:好的,我想通了。我的问题最终出现在 html 中,这是我在原始问题中未能发布的一小段代码。
对于那些好奇的人,我的 HTML 最初看起来像这样:
<div class="blog-list">
<div class="pmason"></div>
<div class="pmason"></div>
<div class="pmason"></div>
</div>
对于任何正常目的来说,这是正确的代码。但是因为无限滚动会在它自己的内部附加新项目,所以我最终得到了更像这样的东西:
<div class="blog-list">
<div class="pmason"></div>
<div class="pmason"></div>
<div class="pmason"></div>
</div>
<div class="infinite-scroll">
<div class="pmason"></div>
<div class="pmason"></div>
<div class="pmason"></div>
</div>
鲁鲁。你看到这里发生了什么吗?无限滚动已将其置于我的博客列表类之外,即使我已指定使用该类。为了解决这个问题,我只是在 blog-list 的 INSIDE 上添加了一个额外的包装器,这样当无限滚动运行时,它就可以保留所有内容。
这是最终结果,现在可以正常工作了!
<div class="blog-list">
<div class="inner">
<div class="pmason"></div>
<div class="pmason"></div>
<div class="pmason"></div>
</div>
<div class="infinite-scroll">
<div class="pmason"></div>
<div class="pmason"></div>
<div class="pmason"></div>
</div>
</div>
非常感谢那些试图帮助我的人。我真的很感激。
【讨论】:
【参考方案2】:我不知道这个无限滚动插件。但它似乎创建了新元素,而这些新元素没有悬停事件监听器。
所以,我建议你用这种方式做悬停事件监听器。
$j('div.blog-list').on("mouseenter",".blog-thumbs-animate", function ()
$j("img", this).stop().animate(opacity: 0.9,queue:false,duration:75);
$j(".bhover", this).animate(opacity: 0.9,queue:false,duration:75);
).on("mouseleave",".blog-thumbs-animate", function ()
$j("img", this).stop().animate(opacity: 1,queue:false,duration:75);
$j(".bhover", this).animate(opacity: 0,queue:false,duration:75);
);
通过on
方法添加事件侦听器与hover
方法的区别在于它不会将事件侦听器直接附加到元素,而是附加到选择器。所以即使你创建了新元素,这个事件监听器也会匹配新元素。
更多详情在这里http://api.jquery.com/on/
【讨论】:
感谢您的提示!您的代码有效,但不幸的是,这种执行事件侦听器的方式并没有改变项目的显示方式。但也许这更干净,所以我可以保留它。 您能给我们提供您的代码的工作示例吗?如果我的回答对您有所帮助,请点赞。以上是关于CSS属性不适用于jQuery无限滚动中的附加项目的主要内容,如果未能解决你的问题,请参考以下文章