时间戳

首页 > 解决方案 > 使用数据属性自动触发点击页面加载 - jquery

javascript - 使用数据属性自动触发点击页面加载 - jquery

问题描述

我试图触发基于数据属性的页面加载点击，在本例中为数据过滤器。我有保存在本地存储中的属性值。我检索它，但我不确定我如何定位具有该属性的特定列表项。

例如，如果本地存储返回 .portfolio-category-1，我该如何定位？

提前致谢

/* 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>

标签： javascriptjqueryhtml

解决方案

这将为您工作：

我添加了一个.each()函数来检查所有元素并使用它来.edgtf-pl-filter识别元素localStorage并触发click()它。

我已删除该setTimeout()功能，因为它不是必需的

/* 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>

工作小提琴以检查它是否正常工作。

希望这对您有所帮助。

推荐阅读