1

我有一个网站，其中一些 div 正在通过数据过滤器进行排序。

<li><a href="#" class="active" data-filter=".xyz">XYZ</a></li>

现在加载文档时，所有 div 都会显示出来。我怎样才能实现它，只有“xyz”类的 div 才会出现？

希望有人可以帮助我，现在真的不明白。

编辑：抱歉输入这么少的代码。

<ul class="filter">
    <li><a href="#" class="active" data-filter=".nature">Nature</a></li>
    <li><a href="#" data-filter=".logo">Logo</a></li>
    <li><a href="#" data-filter=".brochures">Brochures</a></li>
    <li><a href="#" data-filter=".business-card">Business Card</a></li>
</ul>
<div class="nature">...</div>
<div class="logo">...</div>

现在每个 div 都显示在页面加载中。我只想显示第一个 div (.nature)。过滤是由？？我猜jquery。

4

3 回答 3

0

假设“显示”是指显示，您可以使用 css 控制它：

[data-filter = '.xyz'] {
  display: none;
}

data-filter这将匹配所有具有精确值调用属性的元素.xyz。如果您要像使用该属性一样使用此class属性，其中类由空格分隔，您可以使用|=属性选择器：

[data-filter ~= '.xyz'] {
  display: none;
}

在这里，您可以在工作演示中看到它。

希望这可以帮助！

于 2013-10-24T20:29:41.130 回答
0

如果我理解正确，您需要隐藏任何具有与data-filter属性所在的元素不匹配的属性值（CSS 选择器）的元素？

你可以这样做：

HTML

<div class="xyz" data-filter=".xyz">should show</div>
<div class="no-xyz" data-filter=".xyz">should not show</div>
<div class="no-xyz" data-filter=".xyz">should not show</div>

JS

window.onload = function () {
    var filteredEls = document.querySelectorAll('[data-filter]'),
        i = 0,
        len = filteredEls.length,
        frag = document.createDocumentFragment(),
        el, elClone;

    for (; i < len; i++) {
        el = filteredEls[i];

        elClone = el.cloneNode(false);

        frag.appendChild(elClone);

        if (!frag.querySelector(el.getAttribute('data-filter'))) {
            el.style.display = 'none';
        }

        frag.removeChild(elClone);
    }

};

编辑：看起来你编辑了这个问题，我第一次误解了它。

如果您正在使用 jQuery 并且已经有一个插件可以在您单击这些过滤器元素时进行过滤，但该插件最初并未隐藏任何元素，您可能只需click在初始过滤器上触发一个事件。

$(function () {
    $('ul.filter li:first-child > a').trigger('click');
});
于 2013-10-24T20:45:40.287 回答
-1

我找到了解决方案。我只用谷歌搜索了虚假的东西。解决方案就在这里。 页面加载时如何激活 JS 数据过滤器？ 感谢大家的回答！

于 2013-10-25T14:30:04.190 回答