Question

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

我的列表项目有不同的类名，一个是项目第一个，或者最后一个项目是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函数：

(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

就这样做

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

参考 LIVE DEMO

更新：

根据选择范围隐藏价目表

$("#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

Answer 2

由于元素的ID必须是唯一的，因此请使用{/ 1}}属性，例如

data-*

然后

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

演示：Fiddle

Answer 3

@Arun有一个很好的答案，但为了多样性，我会加上这个。

首先，您需要确保没有重复的id。其次，他们应该以一封信而不是一个数字开头。将id中列表元素的ul .box-content更改为与锚链接的id匹配的类。像这样：

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

现在，使用jQuery的 .siblings()选择器，您可以执行类似这样的操作来隐藏除了您单击的项目之外的所有内容。

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

以下是其中的一个小提琴：http://jsfiddle.net/5rWQN/

Answer 4

用jQuery做：

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

以下是现场演示：Fiddle

当点击列表项时隐藏其他项目

4 个答案: