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

Question

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

可能接近于： or

但其中 none 个答案与此问题匹配。

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。

Answer 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');
 }
});
});

工作fiddle：http://codepen.io/anon/pen/meZbqQ

Basically was just a mather of scope; inside your hasId function you are referencing to $(this) and asking for the data('id') attribute, but in that scope $(this) isn't referencing the initial entry object.

Answer 2

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

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

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

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

Answer 3

而不是：

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

使用：

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

Answer 4

您需要引用您传递给 hasId 的元素，而且虽然不是强制性功能，但也会超出 $(document).ready(function(){ });

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

Answer 5

我相信 JQuery 的 data() 方法 returns 如果值为空则未定义。所以在你的比较中你想使用：

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

}

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

How to detect if an HTML5 data-* attribute has empty string as value?

javascript

jquery

custom-data-attribute

工作fiddle：http://codepen.io/anon/pen/meZbqQ