Question

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

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

现在加载Document时，所有div都显示出来。我怎样才能实现它，只有div和＃34; xyz＆＃34;出现了？

希望有人可以帮助我，现在真的没有。

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

<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都显示在pageload上。我只喜欢要显示的第一个div（.nature）。过滤是由?? ??我猜jquery。

Answer 1

假设通过“show up”表示显示，您可以使用css控制它：

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

这将匹配具有名为data-filter的属性且完全值为.xyz的所有元素。如果您要像class属性那样使用此属性，其中类由空格分隔，则可以使用|=属性选择器：

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

您可以在working demo。

中看到它

希望这有帮助！

Answer 2

如果我理解正确，你需要隐藏任何具有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');
});

Answer 3

我找到了解决方案。我只是谷歌做了虚假的事情。解决方案就在这里。 How to activate JS data-filter when page loads? 感谢大家的回答！

关于加载文档的Javascript，数据过滤器

3 个答案: