当点击列表项隐藏其他项 [英] when click on list item hide other items

问题描述

我有价格在列表中，我想点击价格时，隐藏其他价格范围

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

演示Jsfiddle

我的列表项目有不同的类名称一个是项目第一或项目最后这里是要点击的html：

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

列表：

    <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>    

将显示的列表：

<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功能：

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

推荐答案

只要这样做

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

请参阅 LIVE DEMO

Refer LIVE DEMO

更新时间：

基于选择范围隐藏价格表

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();
});

请参阅 LIVE DEMO 2

Refer LIVE DEMO 2

这篇关于当点击列表项隐藏其他项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！