如何检测 HTML5 data-* 属性是否有空字符串作为值？答案

【问题标题】：How to detect if an HTML5 data-* attribute has empty string as value?如何检测 HTML5 data-* 属性是否有空字符串作为值？
【发布时间】：2016-02-18 22:41:09
【问题描述】：

如果某个 DOM 元素的给定 data-* 属性具有空字符串作为值，我如何使用 jQuery / JavaScript 检测？常见的比较运算符似乎无法正常工作，如下例所示。我

可能接近于：Checking for HTML5 data attribute with no value 或 set data- html5 value by default

但这些答案都不符合这个问题。

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

$(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 上提供的示例。

【问题讨论】：

你有 html、css 和 javascript。只需将其粘贴到工作的 sn-p 中！
注意：不要使用data，除非你真的将它用于它的用途。如果您只是访问属性值，请使用attr。 data 不只是 data-* 属性的访问器，它的作用远不止于此，而且有开销。
@T.J. Crowder jQuery API 文档说关于 data()：描述：返回 jQuery 集合中第一个元素的命名数据存储的值，由 data(name, value) 或 HTML5 data-* 属性设置。
@Bunjip：对。它不仅仅是data-* 属性的访问器。它用于管理 jQuery 的内部数据存储，它将导致从data-* 属性初始化（仅）。将它用作访问器只是为了获取属性值是不正确的用法，并且会使 jQuery 做额外的工作并消耗额外的内存。这也会导致混淆，因为 data 从不设置 data-* 属性。
@T.J.克劳德：好的，很高兴知道！感谢您的见解。我之前遇到过问题， data() 实际上不是 setting data-* 属性，而只是初始化不可见的数据存储。 IMO，jQuery 文档在这一点上应该更准确。

标签： javascript jquery custom-data-attribute

【解决方案1】：

您的代码需要稍作调整才能正常工作：

$(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 对象。

【讨论】：

“您的代码需要稍作调整才能正常工作” 太好了。 是什么？为什么需要它？代码转储很少有用答案。
完成@T.J.Crowder；作为一个非英语为母语的人，有时我只是在得到某些词来描述问题时添加该信息……这就是我的工作方式，首先是我的答案，然后是解释……对不起，这只是一个关于寻找的问题正确的话xD
这样就行了。另外现在，我可以按照@ahervin 的建议将 hasId() 函数放在 document.ready() 处理程序之外。

【解决方案2】：

问题是，在您的hasId() 函数内部$(this) 没有引用正确的元素。试试这个：

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

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

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

【讨论】：

您的解决方案解决了这个问题。只是检查一下，如果@Hackerman 的解决方案（首先出现）也解决了它

【解决方案3】：

代替：

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

使用：

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

【讨论】：

【解决方案4】：

您需要引用传递给hasId 的元素，尽管不是强制功能会超出$(document).ready(function(){ });

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

【讨论】：

我知道只要不涉及其他功能，这现在就可以工作。但是，我的代码 sn-p 只是简化了一段更复杂的代码，其中 hasId() 函数不能省略。
@Bunjip 我承认我实际上覆盖了我在整理之前所做的代码笔。如果该函数将在 click 事件以外的其他地方使用，则应将其移出 document.ready
好吧，在 document.ready 中定义该函数的原因是，我认为它需要在 click-event-handler 中才能访问选择的元素。但是，我刚刚了解到， $(this) 无论如何都不会在处理程序的子函数中工作。因此，同意将 hasId() 函数移出 document.ready 处理程序。

【解决方案5】：

如果值为空，我相信 JQuery 的 data() 方法会返回 undefined。所以在你想要使用的比较中：

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

}

【讨论】：

这不起作用。我想，只要数据属性在物理上在代码中，它就不是未定义的，即使值为空。