Question

我有jQuery同位素过滤在以下地址工作：

http://romeavenue.com/en/2/Tours-Of-Italy

但是，我现在正尝试在不同的网站上实现相同的功能，但无法使其正常运行。这就是我所拥有的

http://eternalcitytours.com/en/2/Tours-Of-Italy

问题在于<ul id="filter-container" class="feature cf">

在有效的代码上，代码显示应用于容器<ul id="filter-container" class="feature cf isotope">的类同位素和分配了同位素项类的<li>项。然而，在没有工作的情况下，同位素类没有被分配。我不明白为什么。

我的custom.js是：

var $container = $('#filter-container');

$container.imagesLoaded( function(){
    $container.isotope({
        itemSelector : 'li',
        filter: '*',
        resizable: false,
        animationEngine: 'jquery'             
    });
});

// filter buttons

$('#filter-buttons a').click(function(){

    // select current
    var $optionSet = $(this).parents('#filter-buttons');
    $optionSet.find('.selected').removeClass('selected');
    $(this).addClass('selected');

    var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });
    return false;
});

任何想法。我已经尝试了一切，使它与第一个例子的代码相同，但没有任何工作，我处于死胡同......

由于

汤姆

Answer 1

您正在加载2个不同版本的jQuery，并且在需要它的插件之后加载jQuery。它需要在你的jQuery插件之前加载。

删除它：

 <script>
  window.jQuery || document.write('<script src="http://eternalcitytours.com/assets/js/jquery-1.7.1.min.js"><\/script>')
 </script>

重写您的其他脚本：

<!-- Placed at the end of the document so the pages load faster --> 
<script src="http://eternalcitytours.com/assets/js/jquery.js"></script> 
<script src="http://eternalcitytours.com/assets/js/custom.js"></script> 
<script src="http://eternalcitytours.com/assets/js/jquery.isotope.min.js"> </script> 
<script src="http://eternalcitytours.com/assets/js/css3-mediaqueries.js"> </script> 
<script src="http://eternalcitytours.com/assets/js/scripts.js"></script> 
<script src="http://eternalcitytours.com/assets/js/bootstrap.min.js"></script> 
<script src="http://eternalcitytours.com/assets/js/ketchup.all.js"></script>

Answer 2

我有一个类似的问题，我意识到当你在引导程序之前链接同位素脚本然后它被引导脚本覆盖。

在bootstrap脚本之后放置同位素脚本。我通常把它作为最后一个脚本

jQuery同位素过滤器无法正常工作

2 个答案: