У меня есть цены в списке, и я хочу, нажав на цену, скрыть другой диапазон цен
Демо-версия 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-(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