如何检测HTML5的data-*属性是否为空字符串值？

Question

如何检测HTML5的data-*属性是否为空字符串值？

6

我如何使用jQuery / JavaScript检测特定DOM元素的给定data-*属性是否具有空字符串值？常见的比较运算符似乎无法正常工作，如下面的示例所示。我可能接近：检查没有值的HTML5数据属性或默认情况下设置数据HTML5值，但这些答案都不符合这个问题。HTML：

<ul class="list">
  <li class="list--item" data-id="x6gftcc-44">First entry</li>
  <li class="list--item" data-id="">Last entry</li>
</ul>
<div class="message"></div>

一些CSS

.list{
    list-style-type: none;
  }
  .list--item{
    display: inline-block;
    min-width: 200px;
    padding: 20px;
    border: 1px solid rgb(60,64,73);
    cursor: pointer;
  }
  .message{
    display: none;
  }
  .message.active{
    display: block;
  }
  .true{
    color: green;
  }
  .false{
    color: red;
  }

JavaScript（简称JS）

$(document).ready(function(){
  $('.list--item').click(function(event, target){
    function hasId(){
      if ($(this).data('id') != ''){
            return true;
        }
        else{
            return false;
        }
    };
    var entry = {
      id: $(this).data('id'),
      hasId: hasId()
    };
    if (entry.hasId){
      $('.message').addClass('active true');
      $('.message').text('Picked entry ID: ' + entry.id);
    }
    else{
      $('.message').addClass('active false');
      $('.message').text('Entry ID not available');
    }
  })
});

示例可在CodePen查看。

- Bunjip

2

你有HTML、CSS和JavaScript代码。只需将其粘贴到工作代码片段中即可！ - Jon Surrell

注意：除非您真正使用它的用途，否则不要使用 data。如果您只是访问属性值，请使用 attr。data 不仅仅是 data-* 属性的访问器，它还有很多其他功能，并且具有开销。 - T.J. Crowder

@T.J. Crowder jQuery API文档中关于data()的说明如下：描述：返回jQuery集合中第一个元素在命名数据存储中的值，该值由data(name, value)或HTML5 data-*属性设置。 - Bunjip

@Bunjip：没错。它不仅仅是data-*属性的访问器。它用于管理jQuery的内部数据存储，只有从data-*属性中初始化时才会引起它。仅将其用作访问器以获取属性值并不是正确的用法，这会使jQuery做额外的工作并消耗额外的内存。它还会导致混淆，因为data从不设置data-*属性。 - T.J. Crowder

@T.J. Crowder：好的，这很有用！谢谢您提供这些见解。我以前遇到过data()实际上没有设置data-*属性，而只是初始化了不可见的数据存储的问题。在我看来，jQuery文档应该更加精确地说明这一点。 - Bunjip

5个回答

5

问题在于，你的hasId()函数中的$(this)没有引用到正确的元素。尝试如下操作：

   function hasId(element){
      if (element.data('id') != ''){

            return true;
        }
        else{
            return false;
        }
    };

    var entry = {
      id: $(this).data('id'),
      hasId: hasId($(this))
    };

- om1

你的解决方案解决了这个问题。只是想确认一下，@Hackerman的解决方案（先前提出的）也能解决它吗？ - Bunjip

2

改为：

$(this).data('id') != ''

使用：

$(this).attr('data-id') != ''

- neilrioszamora

1

你需要引用传递给hasId的元素，并且虽然不是必需的，但函数应该放在$(document).ready(function(){ });之外。

请查看已更新的Codepen，我已删除函数并缩短了代码。

- ahervin

我理解现在这个代码可以工作，只要没有涉及到额外的函数。然而，我的代码片段只是简化了一个更复杂的代码块，在那里 hasId() 函数是不能省略的。 - Bunjip

@Bunjip 我承认我实际上在整理代码之前覆盖了之前的codepen。如果该函数将在除单击事件之外的其他地方使用，则应将其移出document.ready。 - ahervin

好的，将函数定义在document.ready中的原因是，我认为它需要在click事件处理程序内部才能访问所选元素。然而，我刚刚学到，在处理程序的子函数中$(this)也无法工作。因此，同意将hasId()函数移出document.ready处理程序。 - Bunjip

-1

我相信JQuery的data()方法在值为空时会返回undefined。因此，在比较中，您应该使用：

if ($(this).data('id') !== undefined){

}

- mcgraphix

1

这个不起作用。我认为只要数据属性在代码中存在，即使值为空，它也不是未定义的。 - Bunjip

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hackerman · Accepted Answer

您的代码需要进行一些调整才能正常工作：

$(document).ready(function(){
  $('.list--item').click(function(event, target){
   function hasId(my){
    if (my.data('id') != ''){
        return true;
    }
    else{
        return false;
    }
  };
 var entry = {
  id: $(this).data('id'),
  hasId: hasId($(this))
 };
 if (entry.hasId){
  $('.message').addClass('active true');
  $('.message').text('Picked entry ID: ' + entry.id);
 }
 else{
  $('.message').addClass('active false');
  $('.message').text('Entry ID not available');
 }
});
});

可运行的代码片段: http://codepen.io/anon/pen/meZbqQ

问题其实只是作用域的一个问题，你在hasId函数内部引用了$(this)并请求data('id')属性，但在该范围内$(this)未引用最初的entry对象。