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

这个怎么样？

将此脚本添加到您的

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

还要将此html添加到测试

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

如果你想检查，这是一个小问题 http://jsfiddle.net/sabri/Hy2MQ/

使用jquery +复选框来过滤帖子

1 个答案: