使用jquery +复选框过滤

Question

我在我的wordpress主题中使用了一个名为quicksand的插件，该插件加载了选择的类别中的帖子。现在我已经为每个帖子添加了自定义taxnomies /自定义字段值，并且希望能够根据它们对帖子进行排序。

因为我真的不熟悉jquery，我真的不知道要开始。我知道我的脚本听取“链接”点击。我也明白它会检查点击链接的类，并将其发送给我的流沙脚本，以确定显示的内容，然后顺利地为我制作动画。

这里的脚本：

$(document).ready(function(){ 

// Blur images on mouse over 
$(".portfolio a").hover(function(){ 
    $(this).children("img").animate({ opacity: 0.75 }, "fast"); 
}, function(){ 
    $(this).children("img").animate({ opacity: 1.0 }, "slow"); 
}); 

// Clone portfolio items to get a second collection for Quicksand plugin 
var $portfolioClone = $(".portfolio").clone(); 

// Attempt to call Quicksand on every click event handler 
$(".filter a").click(function(e){ 

    $(".filter li").removeClass("current"); 

    // Get the class attribute value of the clicked link 
    var $filterClass = $(this).parent().attr("class"); 

    if ($filterClass == "all") { 
     var $filteredPortfolio = $portfolioClone.find("li"); 
    } else { 
     var $filteredPortfolio = $portfolioClone.find("li[data-type~=" + $filterClass + "]"); 
    } 

    // Call quicksand 
    $(".portfolio").quicksand($filteredPortfolio, { 
     duration: 800, 
     easing: 'easeInOutQuad' 
    }, function(){ 

     // Blur newly cloned portfolio items on mouse over and apply prettyPhoto 
     $(".portfolio a").hover(function(){ 
      $(this).children("img").animate({ opacity: 0.75 }, "fast"); 
     }, function(){ 
      $(this).children("img").animate({ opacity: 1.0 }, "slow"); 
     }); 


    }); 


    $(this).parent().addClass("current"); 

    // Prevent the browser jump to the link anchor 
    e.preventDefault(); 
}) 
}); 

我使用这个插件在我的WordPress网站，我已经成功地修改它显示后的在正确的类别。我怎样才能让它查找复选框？这是我的源代码的样子。

<!-- //Setting up the args variable --> 
<div id="wrap"> 
<dl class="group"> 
<dt>Filter:</dt> 
<dd> 

<!-- Setting up the list id --> 
<ul class="filter group"> 
<!-- Adding all option as it will always be there, theres always an all! --> 
<li class="current all"><a href="#">All</a></li> 
<!-- Doing the if to dynamicly add all the categories --> 

<li class="Stenar"><a href="#">Stenar</a></li> 

    <li class="logos"><a href="#">logos</a></li> 

    <li class="web"><a href="#">web</a></li> 

    <li class="web"><a href="#">web</a></li> 


</ul> 
</dd> 
    </dl>  

    <ul class="portfolio group"> 


    <li class="item" data-id="1" data-type="Stenar"> 
    <a href="http://bugaboodonkey.info/2012/01/utanfor/" rel="prettyPhoto [portfolio]"><img width="140" height="130" src="http://bugaboodonkey.info/wp- content/uploads/2012/01/73e3fb17.gif" class="attachment-post-thumbnail wp-post-image" alt="73e3fb17" title="73e3fb17" /></a> 
<!-- Hämtar custom taxonomy --> 
<!-- Hämtar Customvalue baserat på key --> 
<!-- &nbsp;&nbsp; Pris: --> 
</li> 



<li class="item" data-id="2" data-type="logos"> 
<a href="http://bugaboodonkey.info/2012/01/testar-3/" rel="prettyPhoto[portfolio]"><img width="140" height="130" src="http://bugaboodonkey.info/wp-content/uploads/2012/01/73e3fb17.gif" class="attachment-post-thumbnail wp-post-image" alt="73e3fb17" title="73e3fb17" /></a> 
<!-- Hämtar custom taxonomy --> 
<!-- Hämtar Customvalue baserat på key --> 
<!-- &nbsp;&nbsp; Pris: --> 
</li> 



<li class="item" data-id="3" data-type="web"> 
<a href="http://bugaboodonkey.info/2012/01/testar-1/" rel="prettyPhoto[portfolio]"><img width="140" height="58" src="http://bugaboodonkey.info/wp-content/uploads/2011/06/bugaboo-donkey1-475x198.jpg" class="attachment-post-thumbnail wp-post-image" alt="Bugaboo Donkey" title="bugaboo donkey" /></a> 
<!-- Hämtar custom taxonomy --> 
<!-- Hämtar Customvalue baserat på key --> 
    <!-- &nbsp;&nbsp; Pris: --> 
</li> 



<li class="item" data-id="4" data-type="web"> 
<a href="http://bugaboodonkey.info/2012/01/kattsand/" rel="prettyPhoto[portfolio]"><img width="140" height="58" src="http://bugaboodonkey.info/wp-content/uploads/2011/06/bugaboo-donkey1-475x198.jpg" class="attachment-post-thumbnail wp-post-image" alt="Bugaboo Donkey" title="bugaboo donkey" /></a> 
<!-- Hämtar custom taxonomy --> 
<!-- Hämtar Customvalue baserat på key --> 
<!-- &nbsp;&nbsp; Pris: --> 
</li> 



</ul> 

    <!-- 
<li data-id="id-1" data-type="hannah"> 
    <a href="images/hannah_yg.jpg" rel="prettyPhoto[portfolio]"> 
     <img src="images/hannah_yg_thumb.jpg" /> 
    </a> 
    </li> 

    --> 

    </div> 

Answer 1

这是怎么回事？

这个脚本添加到你的，如果你想检查 http://jsfiddle.net/sabri/Hy2MQ/