I'm puzzled on how to work this so not all of the <li>
items load on a page refresh. The filtering works fine on each link selection in the <ul>
"filter", but on a page reload, all <li>
items show, not just the filtered.
Code is from http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/
HTML:
<div id="container">
<li>home.com</li>
<ul id="filter">
<li><a href="#">books</a></li>
<li><a href="#">essays</a></li>
<li><a href="#">film</a></li>
</ul>
<ul id="portfolio">
<li class="books"><a href="#"><img src="images/one.gif" alt="" height="120" width="200" />Book One</a></li>
<li class="books"><a href="#"><img src="images/two.gif" alt="" height="120" width="200" />Book Two</a></li>
<li class="essays"><a href="#"><img src="images/three.gif" alt="" height="120" width="200" />Essay One</a></li>
<li class="essays"><a href="#"><img src="images/four.gif" alt="" height="120" width="200" />Essay Two</a></li>
<li class="film"><a href="#"><img src="images/five.gif" alt="" height="120" width="200" />Film One</a></li>
<li class="film"><a href="#"><img src="images/six.gif" alt="" height="120" width="200" />Film Two</a></li>
</ul></div>
JS:
$(document).ready(function() {
$('ul#filter a').click(function() {
$(this).css('outline','none');
$('ul#filter .current').removeClass('current');
$(this).parent().addClass('current');
var filterVal = $(this).text().toLowerCase().replace(' ','-');
if(filterVal == 'all') {
$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul#portfolio li').each(function() {
if(!$(this).hasClass(filterVal)) {
开发者_开发技巧 $(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
});
You are trying to pass on the filter on a page reload? If yes, you could either pass on the variable in the url, or use cookies.
精彩评论