当单击列表项时，隐藏其他项

Question

I have prices in a list and I want to when clicking the price,hide the other range of prices

Demo Jsfiddle

my list items has different class names one is item first or item last here is the html:

list to be clicked:

    <h2>Filter By Price</h2>
                <ol id="myAnchor">                        
                    <li><a id="0-20" href="#" >0.00 - 20.00</a></li>
                    <li><a id="20-50" href="#">20.00 - 50.00</a></li>
                    <li><a id="50-80" href="#" >50.00 - 80.00</a></li>
                    <li><a id="80-100" href="#">80.00 - 100.00</a></li>
                    <li><a id="All" href="#">All</a></li>
                </ol>    

the list that will be shown:

<ul class="box-content">
        <?php endif ?>
        <li id="<?php 

        $price= $_item->getPrice();
        switch ($price)
        {
            case ($price<20):
            echo "0-20";
            break;

            case ($price>20 && $price<50):
            echo "20-50";
            break;

            case ($price>50 && $price<80):
            echo "50-80";
            break;

            case ($price>80 && $price<100):
            echo "80-100";
            break;
        } ?>" class="item<?php if (($i - 1) % $col == 0):?> first<?php elseif ($i % $col == 0): ?> last<?php endif; ?>">

javascript function:

(function(j$) {    
j$("#myAnchor").click(function(e)
          {
             var id=e.target.id;
             switch(id)
            {
            case("0-20"):
                    alert("something");
                var a = document.getElementsByTagName('li')
                var all_at_once = "";
                for(i=0;i<a.length;i++){
//                  alert(a[i].childNodes[0].text());
                    //if(a[i].childNodes[0].id=="20-50" || a[i].childNodes[0].id=="50-80"||a[i].childNodes[0].id=="80-100")
                      // j$('.box-content ul li').hide();
                            //a[i].childNodes[0].style.display="none";
                       ??????????? I don't knwo what to do in for loop
                }

            break;

        }

              }); //click anchor
    })(jQuery);//ready

Answer 1

Just do this

$("#myAnchor li a").click(function(){
    $("#myAnchor li").not($(this).parent()).hide();
});

Refer LIVE DEMO

Updated:

To hide price list based on selecting the range

$("#myAnchor li a").click(function(){
    var prices = $(".box-content li");
    prices.show();
    if (this.id != "All")
        prices.not($(".box-content li[id='"+this.id+"']")).hide();
});

Refer LIVE DEMO 2

Answer 2

Since ID of an element must be unique, use a data-* attribute like

<h2>Filter By Price</h2>
<ol id="myAnchor">                        
    <li><a data-range="0-20" href="#" >0.00 - 20.00</a></li>
    <li><a data-range="20-50" href="#">20.00 - 50.00</a></li>
    <li><a data-range="50-80" href="#" >50.00 - 80.00</a></li>
    <li><a data-range="80-100" href="#">80.00 - 100.00</a></li>
    <li><a data-range="All" href="#">All</a></li>
</ol>   
<ul class="box-content">
    <li data-range="0-20">13$</li>
    <li data-range="20-50">23$</li>
    <li data-range="50-80">60$</li>
</ul>

then

(function ($) {
    var $contents = $('.box-content > li');
    $("#myAnchor li").click(function (e) {
        var range = $(this).find('a').data('range');
        if (range == 'All') {
            $contents.show();
        } else {
            $contents.hide().filter('[data-range="' + range + '"]').show()
        }
    }); //click anchor
})(jQuery); //ready

Demo: Fiddle

Answer 3

@Arun has a good answer, but for the sake of variety, I'll add this.

First off, you need to make sure you do not have duplicate id s. Secondly, they should start with a letter and not a number. Change the id s of the list elements in your ul .box-content to classes that match the id s of the anchor links. Something like this:

<ol id="myAnchor">                        
    <li><a id="zero-20" href="#" >0.00 - 20.00</a></li>
    <li><a id="twenty-50" href="#">20.00 - 50.00</a></li>
    <li><a id="fifty-80" href="#" >50.00 - 80.00</a></li>
    <li><a id="eighty-100" href="#">80.00 - 100.00</a></li>
    <li><a id="All" href="#">All</a></li>
</ol>   


<ul class="box-content">
    <li class="zero-20">13$</li>
    <li class="twenty-50">23$</li>
    <li class="fifty-80">60$</li>
</ul>

Now, using jQuery's .siblings() selector you can do something like this to hide everything but the item you clicked on.

$(document).ready(function() {
    $('#myAnchor li a').click(function(){
        var change = $(this).attr('id');
        $('.box-content .'+change).show();
        $('.box-content .'+change).siblings().hide();
    });
});

Here is a fiddle of it in action: http://jsfiddle.net/5rWQN/

Answer 4

With jQuery just do:

$(document).ready(function() {
    $("#myAnchor a").click(function() {
        $("#myAnchor li").hide(); // hide all "li" elements
        $(this).parent().show(); // show the clicked "li" element
    })
});

Here is a Live Demo: Fiddle