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

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'，因为字符串不是布尔值，所以会产生 false。

Answer 3

就我而言，建议的解决方案对我没有帮助，因此我使用 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 4

"true" 在内部被强制转换为布尔值（尝试alert (typeof(isreturn_str))），因此您的=== 比较在类型检查时失败。

您可以拨打.toString()

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

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

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"));