使用具有某些'data-*'的元素调用类上的函数

Question

可以说我有以下html:

<img onclick="showStruct(this)" class="expand" src="Images/Plus.png" data-hidden="true" style="display: none;">
<img onclick="showStruct(this)" class="expand" src="Images/Plus.png" data-hidden="false" style="display: inline;">
<img onclick="showStruct(this)" class="expand" src="Images/Plus.png" data-hidden="true" style="display: none;">

如果元素被隐藏,我存储true在data-hidden字段中,因为我必须同时隐藏所有元素并通过在data-hidden字段中存储"状态" ,我确保我知道要再显示哪些元素.即:

<img onclick="showStruct(this)" class="expand" src="Images/Plus.png" data-hidden="true" style="display: none;">
<img onclick="showStruct(this)" class="expand" src="Images/Plus.png" data-hidden="false" style="display: none;">
<img onclick="showStruct(this)" class="expand" src="Images/Plus.png" data-hidden="true" style="display: none;">

我想要做的是,通过使用jquery,display: inline;只为元素设置data-hidden: 'false'？

我有什么(有效):

$(".expanded").each
    (function() {
        if($(this).attr('data-hidden')=='false'){
            $('.expanded').show();
        }
    });

我的问题是,是否有更好的(更有效的)方式,或者这是唯一的方法吗？

Answer 1

您只需使用属性选择器即可

$('.expanded[data-hidden="false"]').show()

演示:小提琴