投稿をフィルタリングするにはjquery +チェックボックスを使用してください

Question

私のWordPressテーマでquicksandというプラグインを使用しています。このプラグインは選択したカテゴリに投稿を読み込みます。今では、すべての投稿にカスタムタクソミー/カスタムフィールドの値を追加しました。私は自分の投稿を並べ替えることができるようにしたいと考えています。

私は実際に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(); 
}) 
}); 

は、私は私のワードプレスのサイトにこのプラグインを使用して、私はポストの右のカテゴリでを表示するためにそれを修正するために管理しています。チェックボックスをチェックするにはどうしたらいいですか？これが私のソースコードの様子です。

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