Hello,
I'm just starting to delve into JQuery, and I'd like to extinguish as
many bad practices as possible.
I wrote my first script from scratch a few days ago, and here is an
outline of what I wanted the script to do:
>Generate the "category" links/controls onload for graceful degradation
>Display all list items or subsets of a list (grouped by classes on the li)
>when a user clicks on a "category" link
>Set "selected" class on current "category" link.
For example, my page has three links "View all," "Foo1," and "Foo2,"
and "View all" is the selected value by default, showing all the items
in the unordered list below it.
Clicking "Foo1" will display only those list items with a class of
"Foo1," hiding every other list item. Clicking "Foo2" will display
only those list items with a class of "Foo2," ect...
I was able to hack together a Jquery script that does exactly what I
want, but I feel like it is terribly inefficient. I'd appreciate a
tear-down of the code with suggestions for improvement. There may be
discrepancies/typos in the classes or IDs during their conversion to
"fooism."
Thanks!
<script type="text/javascript">
$(document).ready(function(){
$("#selector ul")
.prepend("<li><a href=''>All</a></li><li class='Foo1-button'><a
href=''>Foo1</a></li><li class='Foo2-button'><a href=''>Foo2</a></
li>");
$("#selector a").click(function(event){
$("a.selected").removeClass("selected");
$(this).addClass("selected");
return false;
});
$("li.Foo1-button a").click(function(event){
$("#list li.foo1").css('display', 'block');
$("#list li:not(li.foo1)").hide();
return false;
});
$("li.Foo2-butt a").click(function(event){
$("#list li.foo2").css('display', 'block');
$("#list li:not(li.foo2)").hide();
return false;
});
});
</script>
==============================================
<div id="selector">
<ul>
</ul>
</div>
<ul id="list">
<li class="foo1">Item 1</li>
<li class="foo2">Item 2</li>
</ul>
