Question

我试图在我的Rails应用程序中使用Isotope作为过滤机制。

我已经包含在我发送给客户端的JS文件中：

/*-----------------------------------------------------------------------------------*/
/*  ISOTOPE PORTFOLIO
/*-----------------------------------------------------------------------------------*/
$(document).ready(function () {
    var $container = $('.items');
    $container.imagesLoaded(function () {
        $container.isotope({
            itemSelector: '.item',
            layoutMode: 'fitRows'
        });
    });

    $('.portfolio .filter li a').click(function () {

        $('.portfolio .filter li a').removeClass('active');
        $(this).addClass('active');

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

        return false;
    });
});

至于我的HTML：

<div class="portfolio">
      <ul class="filter">
        <li><a class="active" href="#" data-filter="*">All</a></li>
            <li><a href="#" data-filter=".vegan">Vegan</a></li>
            <li><a href="#" data-filter=".organic">Organic</a></li>
      </ul>
      <ul class="items col4">
            <li class="item vegan">
              <figure class="icon-overlay medium icn-more">
                <a href="" class="fancybox-media" data-rel="portfolio">
                  <img src="default.png" alt="">
                </a>
              </figure>
              <div class="image-caption">
                <h3><a href="#">How to cook quinoa</a></h3>
                <span class="meta"></span>
              </div>
            </li>
            <li class="item organic">
              <figure class="icon-overlay medium icn-more">
                <a href="" class="fancybox-media" data-rel="portfolio">
                  <img src="default.png" alt="">
                </a>
              </figure>
              <div class="image-caption">
                <h3><a href="#">How to organic food</a></h3>
                <span class="meta"></span>
              </div>
            </li>
      </ul>
  </div>

当我点击过滤按钮时，只需刷新网页即可。

此外，我发送给客户端jquery.isotope.min.js，这应该是同位素工作的来源。

此代码是用于Rails应用程序的主题的一部分。

没有控制台错误表明同位素存在问题。

编辑：

代码工作正常，但在JS函数上放置断点后，浏览器中没有执行。

另外，我注意到模板和我的rails应用程序正在使用jquery.isotope.min.js，其中小提琴正在使用isotope.pkgd.min.js

该模板可在以下网址找到：

http://themeforest.net/item/-slowave-multipurpose-responsive-wordpress-theme/6870792

Answer 1

这个问题在同位素JS能够执行之前加载的另一段javascript中出现了错误。删除/解决破碎的JS修复了这个问题。

Jquery同位素过滤机制不起作用，而是页面只刷新

1 个答案: