Получить логические данные из атрибута данных в JQuery

Question

Я пытаюсь получить атрибут данных типа Boolean из HTML-элемента DIV, однако он всегда возвращает значение 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

"true" внутренне приведен к логическому (попробуйте 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

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

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