javascript - 实现流沙jquery插件

Question

我尝试制作一个投资组合页面，如您所见 here 。当您单击这些过滤项之一时；什么也没发生。没有动画效果，没有新的排序..什么都没有!你能帮我解决这个问题吗？

这是动态内容加载器代码:

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

Answer 1

仅供引用，其中存在一些问题，但需要解决:

1. 我们检查了是否存在冲突的 javascript 库(原始问题站点包括 1.9、1.10 和 1.8.3)。
2. 由于流沙需要 1.8.3，因此这就是所需的库。
3. 将 CSS 类选择器更新为 li."+sorttype