我在 div 列表中显示文章。每个 div 都有一个包含文章状态的数据属性。
<div id="article_1" data-status="read"> ... </div>
<div id="article_2" data-status="unread"> ... </div>
有一个按钮可以切换 View 以显示“所有文章”或仅显示“未读”文章。
我的切换函数看起来像这样,它工作正常:
function toggle(status) {
if (status == 'all') {
$('*').filter(function() {
if ($(this).data('status') == "read") {
$(this)[0].style.display = 'block';
}
});
}
else {
$('*').filter(function() {
if ($(this).data('status') == "read") {
$(this)[0].style.display = 'none';
}
});
}
}
问题:是否有更好(更快、更高效)的方法来选择具有 data-status
属性并基于状态切换的 div风景?
引用:
[1] Jquery select all elements that have $jquery.data()
[2] Show/hide multiple divs based on a value in their attribute
[3] filtering divs in jQuery and hiding them based on a custom data attribute tag
最佳答案
您可以只选择 data-status
属性本身:
function toggle(status) {
if (status == 'all') {
$('[data-status=read]').css('display', 'block');
}
else {
$('[data-status=read]').css('display', 'none');
}
}
toggle('unread');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="article_1" data-status="read"> read </div>
<div id="article_2" data-status="unread"> unread </div>
关于javascript - 根据data-*属性控制div的显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34142424/