That's exactly what I was looking for, Ricardo! Thank you.
I suspected the code could be simplified using parent/sibling
selectors; I was just unsure how to do so.
On Apr 15, 6:38 pm, Ricardo <ricardob...@gmail.com> wrote:
> 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 <danh...@gmail.com> 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>
