Javascript 实现QuicksandjQuery插件

正如你所看到的，我试图制作一个公文包页面。单击其中一个过滤器项目时；什么也没发生。没有动画效果，没有新的排序。。没有什么！你能帮我修一下吗

以下是动态内容加载器代码：

//JavaScript Dynamic Content using jQuery
//www.mclelun.com

$(document).ready(function(){
var jqc_vHash = window.location.hash;
var jqc_intInterval = 0;
var jqc_vDuration = 2000;

//Check if there is hash data on first load
if (jqc_vHash)
{
    jqc_fnLoad(jqc_vHash);
}

//FUNCTION: LOAD CONTENT
function jqc_fnLoad(p_ID){

    p_ID = p_ID.substr(1,p_ID.length);

    $("#jqc_loading")
        .css({visibility:"visible"})
        .css({opacity:"1"})
        .css({display:"block"});

    $("#jqc_content").animate({ height: 'hide' }, 500, function() { 
        $("#jqc_content").empty().load("content/"+p_ID+".html", jqc_fnDone);
    });

    //UPDATE LIST COLOR
    $("#jqc_menu").find("li").each(function() { 
        if(this.id == p_ID)
        {
            $(this).css("color", "");
        }
        else
        {
            $(this).css("color", "");
        }
    });
}

//LIST CLICK
$("#jqc_menu li").click(function(){
    clearInterval(jqc_intInterval);
    jqc_vHash = "#" + this.id;
    jqc_fnLoad(jqc_vHash);
    document.location.hash = jqc_vHash;
});

//LINK CLICK
$("#jqc_menu_link a").click(function(e){
    clearInterval(jqc_intInterval);
    jqc_vHash = "#" + this.id;
    jqc_fnLoad(jqc_vHash);
    document.location.hash = jqc_vHash;
    e.preventDefault();
});

//FUNCTION: CHECK HASH CHANGE
function jqc_fnLoop()
{
    var tmpHash = window.location.hash;
    if(tmpHash)
    {
        if(tmpHash != jqc_vHash)
        {
            jqc_vHash = tmpHash;
            jqc_fnLoad(jqc_vHash);
        }

    }
}

//FUNCTION: DONE LOADING
function jqc_fnDone()
{
    $("#jqc_content").animate({ height: 'show' }, 500);
    $("#jqc_loading").fadeTo(1000, 0);
    jqc_intInterval = setInterval(jqc_fnLoop, jqc_vDuration);
    if($('#map-canvas').length && !$('#map-canvas div').length){initialize();}
};

});

这是排序代码

    $(document).ready(function(){
  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
});

html结构

    <div id="w">
<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>


<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>

筛选依据：

作为参考，这方面有一些问题需要解决：

我们检查了冲突的javascript库（最初的问题站点包括1.9、1.10和1.8.3）

因为quicksand需要1.8.3，所以这是必需的库

将CSS类选择器更新为

li.+sorttype

---

您正在使用两个版本的jQuery—请尝试只使用一个版本，看看它是否适合您。如果您不需要IE的向后兼容性，请使用2.0.2。您还可以在此处尝试使用quicksand CDN://CDN.jsdeliver.net/quicksand/1.3/jQuery.quicksand.min。js@r3mus我试过了，但还是一样。你能在JSFIDLE中复制这个吗？我试过弹出哟您的代码已插入，但对我来说似乎工作正常：它在尝试使用

$.browser

时抛出了一个错误（这在jQuery 1.9中被弃用——也许这就是问题所在？）@r3mus这真的很有趣。它是通过内容加载器工作的。但是当我把这个#w div放在我的动态内容加载器中时，它停止了工作。当我单击其中一个li项时，只需跳出页面的头部。我认为内容加载器和quicksand之间存在冲突。你能看看jqc#u fnDone（）吗函数？我没有看到该函数？但我必须做的另一件事是，您的CSS选择器设置不正确。

li[class=“+sorttype+”]

未被检测到；请尝试将其更改为

li。“+sorttype

，看看是否有效？