Question

我正在尝试从html DIV元素中检索Boolean类型的数据属性，但是当字符串转换为boolean时，它总是返回false。

HTML

<div id='test' data-return="true"></div>

JS

isreturn_str = $('#test').data('return');
isreturn = (isreturn_str === 'true');
if (isreturn) {
    document.write("It is true");
} else {
    document.write("It is false");
}

输出

这是假的

http://jsfiddle.net/neilghosh/494wC/

Answer 1

jQuery .data()方法很聪明地识别布尔值和数值并将它们转换为它们的本机类型。所以这会返回布尔值true，而不是"true"：

$('#test').data('return');

如果您想获取原始数据（没有自动数据转换），可以使用.attr()：

$('#test').attr("data-return");

请在此处查看工作测试用例：http://jsfiddle.net/jfriend00/6BA8t/

Answer 2

jQuery识别字符串“true”，因为它是布尔对应物（在数据属性的上下文中），因此：

typeof isreturn_str; // boolean

但是你要严格比较字符串'true'，因为字符串不是布尔值而产生错误。

Answer 3

"true"内部转换为boolean（try alert (typeof(isreturn_str))），因此您的===比较在类型检查时失败。

您可以致电.toString()

isreturn_str = $('#test').data('return').toString();

http://jsfiddle.net/494wC/8/

Answer 4

就我而言，建议的解决方案没有帮助我，因此我使用jquery创建了自己的布尔转换函数：

/**
* Convert a value into a boolean
* @param {Mixed} value The value to check convert into boolean
* @return {Boolean}
*/
var boolVal=function(value){
  var falseValues=['false',0,undefined,'0','no','null',null];

  if (typeof value === 'string' || value instanceof String){
      value=value.toLowerCase();
  }

  return $.inArray(value, falseValues) == -1
}

因此，我通过attr jquery方法检索了值，并像这样传递了它：

boolVal($(href).attr('data-sidebar-sm-display'));

此外，您还可以在以下演示中亲自看到它：

var boolVal = function(value) {
  var falseValues = ['false', 0, undefined, '0', 'no', 'null', null];

  if (typeof value === 'string' || value instanceof String) {
    value = value.toLowerCase();
  }

  return $.inArray(value, falseValues) == -1
}

console.log("#1_true: " + boolVal($("#1_true").attr('data-boolean')))
console.log("#2_true: " + boolVal($("#2_true").attr('data-boolean')))
console.log("#3_true: " + boolVal($("#3_true").attr('data-boolean')))
console.log("#4_true: " + boolVal($("#4_true").attr('data-boolean')))
console.log("#5_true: " + boolVal($("#5_true").attr('data-boolean')))
console.log("#6_true: " + boolVal($("#6_true").attr('data-boolean')))
console.log("#7_true: " + boolVal($("#7_true").attr('data-boolean')))

console.log("#1: " + boolVal($("#1").attr('data-boolean')))
console.log("#2: " + boolVal($("#2").attr('data-boolean')))
console.log("#3: " + boolVal($("#3").attr('data-boolean')))
console.log("#4: " + boolVal($("#4").attr('data-boolean')))
console.log("#4: " + boolVal($("#no_data").attr('data-boolean')))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="1" data-boolean="false"></div>
<div id="2" data-boolean="0"></div>
<div id="3" data-boolean="null"></div>
<div id="no_data"></div>
<div id="4" data-boolean=false></div>

<div id="1_true" data-boolean=yes></div>
<div id="2_true" data-boolean="yes"></div>
<div id="3_true" data-boolean="true"></div>
<div id="4_true" data-boolean="1"></div>
<div id="5_true" data-boolean=1></div>
<div id="6_true" data-boolean="true"></div>
<div id="7_true" data-boolean="TRUE"></div>

定义逻辑“假”考虑什么数据属性以及将其他任何内容设置为真的基本思想。

Answer 5

这并不能完全回答您的问题，但是如果您能够更改 HTML 的设计，请考虑将属性的存在设为布尔值，而不是转换字符串值。换句话说，让<div id="test" data-isreturn>代表true，而只有<div id="test">（没有属性）代表false。

虽然这对于某些编码人员来说似乎不太直观，但它实际上在语义上与 HTML 一致（例如 disabled 属性），并且消除了对字符串中拼写错误和大小写的担忧。它减少了歧义，简洁而优雅。

jQuery 的 .prop() 函数对此很有帮助。

Answer 6

我使用的是jquery 2.1.0，我必须使用eval

// $('#test').attr("data-return");" doesn't works
eval($('#test').attr("data-return"));

从jquery中的data属性中检索布尔数据

6 个答案: