I am learning jQuery I made a simple selection filter with a basic knowledge with the purpose of learning new techniques. My question is, what is a better maybe more complex way to do this: https://codepen.io/frivolta/pen/LLwjjy
$(".elementFilter li").on("click",eventTrigger);
function eventTrigger(){
var getFilterName = $(this).attr("class");
if(getFilterName!="all"){
$(".elementList li:not([data-category='"+getFilterName+"'])").hide();
$(".elementList [data-category='"+getFilterName+"']").show();
}else{
$(".elementList li").show();
}
}
<div class="elements">
<ul class="elementFilter">
<li class="all">Show all</li>
<li class="filterOne">Filter One</li>
<li class="filterTwo">Filter Two</li>
<li class="filterThree">Filter Three</li>
<li class="filterFour">Filter Four</li>
</ul>
<ul class="elementList">
<li data-category="filterOne">Filter One</li>
<li data-category="filterTwo">Filter Two</li>
<li data-category="filterThree">Filter Three</li>
<li data-category="filterFour">Filter Four</li>
</ul>
</div>
I'd like to separate functions and passing parameters between them, if you have any advice I would be glad to hear that. Thanks, F.