If you gave your buttons a common class you could do something like
this:
$("li.button a").click(function(event){
//show the link's parent, hide the parent's siblings
$(this)
.parent().show()
.siblings().hide();
return false;
});
On Apr 14, 11:49 pm, Dante <[email protected]> wrote:
> 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>
