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

Question

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

Demo Jsfiddle

我的列表中的项目有不同的类名一个是项目第一个或最后这里的项目是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必须是唯一的，使用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> 

然后

(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 

演示：Fiddle

Answer 3

使用jQuery只是做：

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

这是一个在线演示：Fiddle

Answer 4

@Arun有一个很好的答案，但对于不同的缘故，我会添加这个。

首先，您需要确保您没有重复的id s。其次，他们应该从一封信开始，而不是一个数字。将ul .box-content中的列表元素的id更改为与锚链接的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/