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

【问题标题】：Set class on page load for filterable grid为可过滤网格设置页面加载类
【发布时间】：2018-03-20 22:43:50
【问题描述】：

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

在单击菜单项之前，该类为空。当然后单击类别菜单项时，该类将像这样“被选中”：

<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 是显示的默认类别？

【问题讨论】：

检查我对您最后评论的编辑

标签： javascript jquery

【解决方案1】：

尝试触发点击事件：

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

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

当你写的时候：

在单击菜单项之前，该类为空。当然后单击类别菜单项时，该类变为“选中”

我假设这也会在点击时触发一个函数，而不仅仅是添加类

编辑

如果您需要使用data-option-value 之类的属性查询<a> 标签，例如：

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

【讨论】：

也许你是对的。我怎么知道这是什么？以下是投资组合项目的示例：enar.ideal-theme.com/wordpress/portfolio
@ZackBluem;我不明白我怎么知道 这个 是什么？当你尝试我的代码时会发生什么？
我很抱歉。当我尝试您的代码时，结果与我的相同。页面加载，选择了正确的选项卡，但仍显示两个类别的所有 10 个项目。
@ZackBluem;我正在查看该网站的标记，看来我的方法应该有效，selected 类仅添加用于样式和信息目的，它正在触发应显示适当类别的单击事件
@ZackBluem;你能试试这段代码并告诉我它输出什么：console.log($('.filter_item_block.cat88').children());？您可以在我的答案中的行旁边，.ready()

【解决方案2】：

点击后 class="selected" 即启用。考虑到这一点，我修改了最初的尝试。这是解决方案。你肯定帮我解决了这个问题。谢谢！

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

【讨论】：