我使用quicksand插件来过滤我的投资组合项目但是当我把这个#w div放到我的动态内容加载器中时它停止工作。(我的意思是过滤器。如果你点击它们,那就不会发生了。)你可以看到{ {3}}
和here是我的投资组合页面的工作示例 - 内容加载器。
my porfolio items -html;
<div id="w">
<center><div class="sort" id="sort"><span class="label">Filter By:</span> <a href="#" class="all selected">All</a> <a href="#" class="web">Web</a> <a href="#" class="ios">iOS</a> <a href="#" class="print">Print</a></div></center>
<ul class="portfolio clearfix">
<li data-id="id-1" data-lightbox="example-set" class="ios"><a class="example-image-link" href="../img/image-3.jpg" data-lightbox="example-set" title="pic1 lorem ipsum dolar bitch!"><img src="images/ios-app-ui-01.png" class="portimg"></a></li>
<li data-id="id-2" data-lightbox="example-set" class="ios"><a class="example-image-link" href="../img/image-6.jpg" data-lightbox="example-set" title="pic2 lorem ipsum dolar bitch!"><img src="images/print-design-cards.png" class="portimg"></a></li>
<li data-id="id-3" class="ios"><a href="" target="_blank"><img src="images/ios-app-ui-02.png" class="portimg"></a></li>
<li data-id="id-4" class="print"><a href="" target="_blank"><img src="images/print-winery-card.png" class="portimg"></a></li>
<li data-id="id-5" class="web"><a href="" target="_blank"><img src="images/website-layout-header.png" class="portimg"></a></li>
<li data-id="id-6" class="web"><a href="" target="_blank"><img src="images/website-base-header.png" class="portimg"></a></li>
<li data-id="id-7" class="print"><a href="" target="_blank"><img src="images/print-cyan-announcement-cards.png" class="portimg"></a></li>
<li data-id="id-8" class="web"><a href="" target="_blank"><img src="images/website-logo-header-image.png" class="portimg"></a></li>
<li data-id="id-9" class="ios"><a href="" target="_blank"><img src="images/ios-ipad-app-03.png" class="portimg"></a></li>
<li data-id="id-10" class="ios"><a href="" target="_blank"><img src="images/ios-tabbar-app-04.png" class="portimg"></a></li>
<li data-id="id-11" class="web"><a href="" target="_blank"><img src="images/website-dropdown-nav-menu.png" class="portimg"></a></li>
<li data-id="id-12" class="web"><a href="" target="_blank"><img src="images/website-restaurant-navigation-icons.png" class="portimg"></a></li>
<li data-id="id-13" class="ios"><a href="" target="_blank"><img src="images/ios-app-ui-05.png" class="portimg"></a></li>
<li data-id="id-14" class="web"><a href="" target="_blank"><img src="images/website-footer-layout-design.png" class="portimg"></a></li>
<li data-id="id-15" class="web"><a href="" target="_blank"><img src="images/website-shop-flowers-navigation.png" class="portimg"></a></li>
</div>
内容加载器代码:
.
.
.
//FUNCTION: DONE LOADING
function jqc_fnDone()
{
$("#jqc_content").animate({ height: 'show' }, 500);
$("#jqc_loading").fadeTo(1000, 0);
jqc_intInterval = setInterval(jqc_fnLoop, jqc_vDuration);
//quicksand filter code:
var pclone = $(".portfolio").clone();
$("#sort a").on("click", function(e){
e.preventDefault();
var sorttype = $(this).attr("class");
// determine if another link is selected
if(!$(this).hasClass("selected")) {
$("#sort a").removeClass("selected");
$(this).addClass("selected");
}
// check filter sort type
if(sorttype == "all") {
var filterselect = pclone.find("li");
} else {
var filterselect = pclone.find("li[class="+sorttype+"]");
}
$(".portfolio").quicksand(filterselect,
{
adjustHeight: 'auto',
duration: 550
}, function() {
// callback function
});
}); // end click event listener
if($('#map-canvas').length && !$('#map-canvas div').length){initialize();}
};
});
答案 0 :(得分:0)
显然,两个jquery插件中都存在同名的ID
或class
。没有人会为你找到这个。因此,请尝试限制您拥有的jquery插件的数量。