Извлечение логических данных из атрибута data в jquery

Я пытаюсь получить атрибут данных типа Boolean из элемента HTML DIV, однако он всегда возвращает false, когда строка преобразуется в boolean .

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/

5 56
jquery html5

5 ответов:

jQuery .data() метод умно распознает логические и числовые значения и преобразует их в свой собственный тип. Так что это возвращает логическое true, а не "true":

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

если вы хотите получить исходные данные (без автоматического преобразования данных), вы можете использовать .attr():

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

смотрите рабочий тестовый случай здесь:http://jsfiddle.net/jfriend00/6BA8t/

95

jQuery распознает строку "true" как логический аналог (в контексте атрибутов данных) и таким образом:

typeof isreturn_str; // boolean

но вы строго сравниваете со строкой 'true' который дает false как строка не является логическим.

6

"true" внутренне преобразован в логический (попробовать alert (typeof(isreturn_str))), следовательно, ваш === сравнение не выполняется при проверке типа.

вы могли бы позвонить .toString()

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

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

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>

основная идея это определить какие данные-атрибуты считаются логикой "ложными" и все остальное задается как истинный.

0

Я использую jquery 2.1.0 и я должен использовать eval

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