Question

我想在bootstrap3中使用nav nav-pills过滤投资组合网格

HTML：

    div class="row">
        <div class="col-lg-12">

<div class="centered-pills">
 <ul id="filterOptions" class="nav nav-pills">

   <li> <a href="#" class="all">All</a></li>

  <li><a href="#" class="latest">Latest</a></li>
  <li><a href="#" class="featured">Featured</a></li>
 <li><a href="#" class="trending">Trending</a></li>
 </ul>
</div>

<ul class="grid cs-style-6">
            <li class="item latest">
                <figure>
                    <a href="portfolio-item.html">
                        <img class="img-responsive img-portfolio img-hover" src="image/items/1.jpeg" alt=""></a>
                    <figcaption>
                        <h3>Hoodies</h3>
                        <span>ToughSkins</span>
                        <a href="portfolio-item.html" class="btn btn-default btn-md" role="button">Take a look</a>
                    </figcaption>
                </figure>
            </li>
            <li class="item featured">
                <figure>
                    <a href="portfolio-item.html">
                        <img class="img-responsive img-portfolio img-hover" src="image/items/1.jpeg" alt=""></a>
                    <figcaption>
                        <h3>Featured Camera</h3>
                        <span>Jacob Cummings</span>
                        <a href="portfolio-item.html" class="btn btn-default btn-md" role="button">Take a look</a>
                    </figcaption>
                </figure>
            </li>
            <li class="item trending">
                <figure>
                    <a href="portfolio-item.html">
                        <img class="img-responsive img-portfolio img-hover" src="image/items/1.jpeg" alt=""></a>
                    <figcaption>
                        <h3>Trending Camera</h3>
                        <span>Jacob Cummings</span>
                        <a href="portfolio-item.html" class="btn btn-default btn-md" role="button">Take a look</a>
                    </figcaption>
                </figure>
            </li>
            <li class="item latest">
                <figure>
                    <a href="portfolio-item.html">
                        <img class="img-responsive img-portfolio img-hover" src="image/items/1.jpeg" alt=""></a>
                    <figcaption>
                        <h3>Fleece Hoodies</h3>
                        <span>Jacob Cummings</span>
                        <a href="portfolio-item.html" class="btn btn-default btn-md" role="button">Take a look</a>
                    </figcaption>
                </figure>
            </li>
            <li class="item featured">
                <figure>
                    <a href="portfolio-item.html">
                        <img class="img-responsive img-portfolio img-hover" src="image/items/1.jpeg" alt=""></a>
                    <figcaption>
                        <h3>Featured Camera</h3>
                        <span>Jacob Cummings</span>
                        <a href="portfolio-item.html" class="btn btn-default btn-md" role="button">Take a look</a>
                    </figcaption>
                </figure>
            </li>
            <li class="item trending">
                <figure>
                    <a href="portfolio-item.html">
                        <img class="img-responsive img-portfolio img-hover" src="image/items/1.jpeg" alt=""></a>
                    <figcaption>
                        <h3>Trending Camera</h3>
                        <span>Jacob Cummings</span>
                        <a href="portfolio-item.html" class="btn btn-default btn-md" role="button">Take a look</a>
                    </figcaption>
                </figure>
            </li>


        </ul>

我应该如何根据nag-pill选择编写jquery来过滤网格组合？

我写了jQuery，但它无法正常工作

我确定这是错的

 $(document).ready(function(){

$('#filterOptions li a').click(function() {
// fetch the class of the clicked item
var ourClass = $(this).attr('class');

// reset the active class on all the buttons
$('#filterOptions li').removeClass('active');
// update the active state on our clicked button
$(this).parent().addClass('active');

if(ourClass == 'all') {
  // show all our items
  $('.grid cs-style-6').children('li.item').show();
}
else {
  // hide all elements that don't share ourClass
  $('.grid cs-style-6').children('li:not(.' + ourClass + ')').hide();
  // show all elements that do share ourClass
  $('.grid cs-style-6').children('li.' + ourClass).show();
   }
return false;
  });
});

有人可以帮我这个吗？

Answer 1

// on click of a check the data attr and show li based on attr val  
$('#filterOptions li a').on('click', function (e) {
    e.preventDefault(); // 
    a = $(this).data('filter'); // finding the data value
    $('.grid li').fadeOut().promise().done(function () { // hiding all li
        $('.grid li.' + a).fadeIn(); // show only the class having the class == data attr
    });

    if ($(this).hasClass('all')) { // check if all is clicked 
        $('.grid li').fadeOut().promise().done(function () { // hiding all
            $('.grid li').fadeIn(); // showing all
        });
    }
});

// on document ready check if a has class active
if ($('#filterOptions li a').hasClass('active')) { // check if active class it there you 
    $('.grid li').fadeIn(); //
}

演示 - http://jsfiddle.net/d9b8pLvw/1/

注意：我为data-filter标记添加了a属性并为您提供了值，并为active标记添加了class a all } class

如何使用jquery

1 个答案: