加载文档时的Javascript、数据筛选器
加载文档时的Javascript、数据筛选器
提问于 2013-10-24 20:21:34
我有一个网站，其中一些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。
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-10-25 14:30:04
我找到了解决办法。我只是用谷歌搜索虚假的东西。解决办法就在这里。如何在页面加载时激活JS数据过滤器？感谢你们的回答！
Stack Overflow用户
发布于 2013-10-24 20:29:41
假设“显示”是指显示，则可以使用css控制它：
[data-filter = '.xyz'] {
display: none;
}它将匹配具有名为data-filter的属性的所有元素，其确切值为.xyz。如果要像使用class属性一样使用这个属性，类由空格分隔，则可以使用|=属性选择器：
[data-filter ~= '.xyz'] {
display: none;
}在这里，您可以在工作演示中看到它。
希望这能有所帮助！
Stack Overflow用户
发布于 2013-10-24 20:45:40
如果我正确理解，您需要隐藏任何具有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');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19575880
复制相关文章
相似问题
腾讯云开发者
