使用data属性自动触发页面加载点击-jQuery

Question

I am trying to trigger a click on page load based on the data attribute, in this case data-filter. I have the value of the attribute saved in local storage. I retrieve it, but I'm not sure how I target the particular list item which has that attribute.

For example, how do I target if the local storage returns .portfolio-category-1?

Thanks in advance

 /* on click do this */ $(".edgtf-pl-filter").click(function() { var isFilter = $(this).data("filter"); localStorage.setItem('pod-filter', isFilter); alert(isFilter); }); /* On page load, do this */ var isFilterRet = localStorage.getItem('pod-filter'); setTimeout(function() { $(".edgtf-pl-filter").trigger('click'); }, 10); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="edgtf-pl-filter" data-filter=""> <span>all</span> </li> <li class="edgtf-pl-filter" data-filter=".portfolio-category-1"> <span>Categroy 1</span> </li> <li class="edgtf-pl-filter" data-filter=".portfolio-category-2"> <span>Category 2</span> </li> <li class="edgtf-pl-filter" data-filter=".portfolio-category-3"> <span>Category 3</span> </li> <li class="edgtf-pl-filter" data-filter=".portfolio-category-4"> <span>Category 4</span> </li> </ul> 

Answer 1

I'm not sure if I correct understand what do you what. You just what to trigger on element which name/class is stored in variable isFilterRet?

Try this:

var isFilterRet = localStorage.getItem('pod-filter');
setTimeout(function() {
    if (isFilterRet){
        $(isFilterRet).trigger('click');
    }
},10);

Answer 2

This will work for you:

I have added a .each() function to check all .edgtf-pl-filter and identify the element with the localStorage and trigger a click() to it.

I have removed the setTimeout() function as it is not required

 /* on click do this */ $(".edgtf-pl-filter").click(function() { var isFilter = $(this).data("filter"); localStorage.setItem('pod-filter', isFilter); alert(isFilter); }); /* On page load, do this */ var isFilterRet = localStorage.getItem('pod-filter'); $(".edgtf-pl-filter").each(function() { var atrFil = $(this).data("filter"); if (atrFil == isFilterRet) { $(this).trigger('click'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="edgtf-pl-filter" data-filter=""> <span>all</span> </li> <li class="edgtf-pl-filter" data-filter=".portfolio-category-1"> <span>Categroy 1</span> </li> <li class="edgtf-pl-filter" data-filter=".portfolio-category-2"> <span>Category 2</span> </li> <li class="edgtf-pl-filter" data-filter=".portfolio-category-3"> <span>Category 3</span> </li> <li class="edgtf-pl-filter" data-filter=".portfolio-category-4"> <span>Category 4</span> </li> </ul> 

working fiddle to check it's working fine.

Hope this was helpful for you.