JSFiddle - React, Tailwind, and code Playground

by neginparsa

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">
      <li id="0-20">13$</li>
      <li id="20-50">23$</li>
      <li id="50-80">60$</li>
      <li id="50-80">58$</li>
</ul>

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";
    		    }
    		 
    		break;
	
        }
       		
       		  }); //click anchor
    })(jQuery);//ready