Question

如果某个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可用的示例。

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

工作小提琴：http://codepen.io/anon/pen/meZbqQ

基本上只是一个范围广泛;您引用hasId的{{1}}函数内部并询问$(this)属性，但在该范围内data('id')未引用初始$(this)对象。

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（）方法返回undefined。因此，在您的比较中，您想要使用：

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

}

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

5 个答案:

工作小提琴：http://codepen.io/anon/pen/meZbqQ