Utiliser jquery + checkbox pour filtrer le message

Question

J'utilise un plugin appelé sables mouvants dans mon thème wordpress ce plugin charge le post dans la catégorie choisie. Maintenant, j'ai ajouté des taxnomies personnalisées/valeurs de champs personnalisés à chaque message, et je veux être en mesure de trier mes messages en fonction d'eux.

Depuis que je suis vraiment nouveau à jquery je ne sais vraiment pas comment commencer. Je comprends que mon script écoute les clics de "lien". Je comprends aussi qu'il vérifie la classe du lien cliqué et l'envoie à mon script de sables mouvants pour qu'il détermine ce qu'il faut montrer, puis je l'anime doucement.

est ici le script:

$(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(); 
}) 
}); 

J'utilise ce plugin sur mon site et je wordpress ont réussi à modifier pour montrer son post dans la bonne catégorie. Comment puis-je faire pour vérifier les cases à cocher? Voici à quoi ressemble mon code source.

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

Que pensez-vous de cela?

ajouter ce script à la vôtre

$("ul li input[type='radio']").live('click', function() { 
    $(".filter li." + $(this).attr('value') + " a").click(); 
}) 

ajouter également ce code html pour tester

<ul> 
    <li><input type="radio" name="filter" value="all" checked /></li> 
    <li><input type="radio" name="filter" value="Stenar" /></li> 
    <li><input type="radio" name="filter" /></li> 
    <li><input type="radio"r name="filter" value="web" /></li> 
</ul> 

C'est un jsFiddle si vous voulez vérifier http://jsfiddle.net/sabri/Hy2MQ/