Question

我这里有一种利基案例。

因此，我正在构建一个侧边栏工具，以便快速记笔记，而且我遇到了问题而没有设置数百个data-attr。

目前，我有一个下拉菜单，根据选择显示包含特定data-attr的内容，并隐藏其余内容。我遇到的问题是我还希望它显示不包含任何 data-attr s的所有项目。

是否有一种简单的方法可以检查某个商品是否包含没有 HTML定义的data套装？

HTML：

<select id="ouSelect">
  <option></option>
  <option data-ou="aiv">AIV ***</option>    
  <option data-ou="appstore">Appstore ***</option>
  <option data-ou="firetv">Fire TV ***</option>
  <option data-ou="kindle">Kindle ***</option>
</select>

<ul id="stuffs">
  <li data-kindle="true">Kindle</li>
  <li>Generic</li>
  <li data-aiv="true">AIV</li>
  <li>Generic</li>
  <li data-firetv="true">FireTV</li>
  <li>Generic</li>
  <li data-appstore="true">Appstore</li>
  <li>Generic</li>
</ul>

jQuery的：

$(function(){
  var ou = "";
  $('#ouSelect').change(function() {
    ou = $('#ouSelect option:selected').data('ou');
    ouSelected(ou);
  });
  function ouSelected(which){
    $('li').each(function(){
      if($(this).data(which) === undefined){
        $(this).hide();
      } else {
        $(this).show();
      }
    })
  }
});

CodePen：http://codepen.io/anon/pen/GyqoK

如您所见，当选择一个选项时，所有通用集都会消失。理想情况下，我希望显示带有data-kindle的项目以及否 data-attr的项目。

任何想法如何实现这一目标？任何帮助表示赞赏！

Answer 1

将支票更改为：

if($(this).data(which) === undefined && Object.keys($(this).data()).length > 0)

Answer 2

鉴于对dataset属性的支持，它就像：

一样简单

Object.keys(element.dataset).length === 0

但是，这不太合适。 data-*属性并不意味着相互干扰，并且它们不应具有动态名称。如何以更简单的方式识别类别？

<li data-category="appstore">Appstore</li>

（不支持dataset属性，您可以使用

function hasDataAttributes(element) {
    for (var i = 0; i < element.attributes.length; i++) {
        var name = element.attributes[i].name;

        if (name.substring(0, 5) === 'data-') {
            return true;
        }
    }

    return false;
}

）

如何确定元素是否没有data-attr

2 个答案: