Question

我使用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();}
    };

    });

Answer 1

显然，两个jquery插件中都存在同名的ID或class。没有人会为你找到这个。因此，请尝试限制您拥有的jquery插件的数量。

两个单独代码之间的jQuery冲突

1 个答案: