Question

在wordpress网站中，我使用的是一个可过滤的网格，显示了两个带沙箱效果的类别。默认功能是显示所有类别，无法在页面加载时显示已定义的类别。

在单击菜单项之前，该类为空。当单击类别菜单项时，类将变为“选中”，如下所示：

<a data-option-value=".cat3" class="selected" href="#"><span>Portfolio 1</span><span class="num">10</span></a>

所以，我尝试使用jquery在页面加载时启用此功能：

jQuery(document).ready(function($) {

$("#filter-by li:first a").addClass("selected");
});

当页面加载时，现在选中了选项卡，但网格仍显示两个类别中的所有项目。期望的结果是仅显示所选类别中的项目。

以下是页面加载时可过滤网格中的代码，显示所有项目（两个类别）。

<ul data-option-key="filter" class="option-set clearfix" id="filter-by"><li><a data-option-value=".cat3" class="" href="#"><span>Portfolio 1</span><span class="num">10</span></a></li><li><a data-option-value=".cat4" class="" href="#"><span>Portfolio 2</span><span class="num">10</span></a></li></ul>

如何才能使每次加载页面时，投资组合1是显示的默认类别？

Answer 1

尝试触发点击事件：

jQuery(document).ready(function($) {

$("#filter-by li:first a").addClass("selected").click();
});

当你写道：

在单击菜单项之前，该类为空。当单击类别菜单项时，该类将变为“已选择”

我认为这也会触发点击功能，而不仅仅是添加类

修改

如果您需要使用<a>等属性查询data-option-value代码，例如：

$('[data-option-value=".cat3"]').addClass("selected").click()

Answer 2

点击后启用class =“selected”。考虑到这一点，我修改了原始尝试。这是解决方案。你肯定帮我搞清楚了。谢谢！

jQuery( window ).load(function() {
  jQuery('#filter-by li:first a').click();
});

为可过滤网格设置页面加载类

2 个答案: