Javascript 设置数据-默认情况下的html5值

我有一些小代码，它将一些预设样式放入带有自定义属性的

div

，这些属性将

src

和APA文本设置为

img

标记，还使用FancyBox生成带有缩放选项的按钮。。。我是jquery领域的新手，所以可能我用错了data属性

问题是，即使在

$（document.ready

）之前，是否可以将数据HTML5属性设置为默认值？我的意思是：

<!--In the text editor:-->
<div data-boolean></div>
<!--In the code inspector after browser render:-->
<div data-boolean="true"></div>

但不起作用，当我为该属性创建一个

console.log（）

时，得到的是一个空字符串，而不是布尔变量。仅当我手动将值设置为true时，它才会显示为布尔值

为了

浏览器响应：

sgApa = APA Test Text! (string)
sgSrc = img/test.jpg (string)
sgImgZoom =  (string)

sgApa = APA Test Text! (string)
sgSrc = img/test-2.jpg (string)
sgImgZoom = false (boolean)

用于：

我用不同的属性尝试了相同的方法，比如APA，似乎很有效。。。所以我不知道

为了

数据sg apa将是“如果使用数据sg apa attr，则必须使用apa文本”，直到您将属性留空

编辑 在这个网站上读到一些类似的问题，我想我可以说我“解决”了这个问题。 这是在报告中提到的

数据属性在第一次>访问数据属性时被拉入，然后不再被访问或修改（所有数据值>然后在jQuery内部存储）

正如你在帖子中看到的

使用控制台检查DOM

$（'foo'）。数据（'helptext'，'Testing 123'）不会更新该值
如控制台中所示，但
$（'#foo'）.attr（'data-helptext'，'Testing
123');可以

因此，在设置所有数据之前，必须对其进行更改，如下所示：

var tempVar = false;        
        if( $(this).data("sgImgZoom" ) === ""){
            tempVar = true;
            $(this).attr("data-sg-img-zoom",true);//optional if you want to see the "value" of that attribute, but really doesn't matters because that value and the real data value are two completely different things..
        }
        var $me     = $(this),
            $meData = $me.data(),
            $meZoom = $meData.sgImgZoom = tempVar;//set default value for data-sg-zoom

if($meZoom){ /*do the thing*/ }

因此，现在我可以更轻松地验证函数，如下所示：

var tempVar = false;        
        if( $(this).data("sgImgZoom" ) === ""){
            tempVar = true;
            $(this).attr("data-sg-img-zoom",true);//optional if you want to see the "value" of that attribute, but really doesn't matters because that value and the real data value are two completely different things..
        }
        var $me     = $(this),
            $meData = $me.data(),
            $meZoom = $meData.sgImgZoom = tempVar;//set default value for data-sg-zoom

if($meZoom){ /*do the thing*/ }

现在代码按预期工作，但很明显
.attr（）
和
.data（）
是两种不同的东西，应该在非常特定的情况下使用

所以现在的问题是：我应该在这个特殊情况下使用HTML5数据吗？还是使用jquery
.attr（）更容易处理它

查看更新代码
您看到这种行为是因为jQuery方法试图将属性转换为Javasript值，下面是手册的摘录：

每次尝试都会将字符串转换为JavaScript值
（这包括布尔、数字、对象、数组和null）

以字符串形式检索值的属性而不进行任何转换
它，使用这个方法

根据HTML5规范，关于：

如果属性存在，则其值必须为空字符串
或者是一个ASCII值，该值不区分大小写，与属性的
规范名称，不带前导或尾随空格

布尔属性上不允许值“true”和“false”。
要表示假值，必须省略该属性
总共

这可能就是jQuery将空字符串作为
datasgimgzoom
属性的值返回的原因

测试属性是否存在

如果您只想测试属性
data attr
的初始存在，例如
，那么jQuery
data（）
和
attr（）
都返回
未定义的
，因此可以使用以下代码：

var is_set = (typeof $(el).attr('data-attr') === 'undefined') ? true : false;

或

测试是否存在属性和
true
/
false
值

如果要测试是否存在属性
数据属性
和值
真
/
假
，例如
、
和
，请使用下面的代码

var el_data_attr = $(el).data('attr');
var is_set = (
      // If attribute is specified
      typeof el_data_attr !== 'undefined' 
      // And no value is given or value is evaluated to true
      && (el_data_attr === '' || el_data_attr)
   ) ? true : false;

作为副作用，属性值
1
，
foo
也将被视为
true
；而
0
，
null
，
NaN
将被视为
false

您示例的解决方案

由于使用单个
data（）
调用检索所有
data-
属性，因此需要使用以下代码：

var $meZoom = (
      $meData.hasOwnProperty('sgImgZoom') 
      && ($meData.sgImgZoom === '' || $meData.sgImgZoom)
) ? true : false;

使用最后一种方法，它工作得非常完美，而且更加容易，但是
console.log
仍然将sgImgZoom显示为空字符串，除非您直接在atribute上输入一个值，因此，如果
if（$meZoom）
工作，$meZoom的实际值存储在哪里？变量
$meZoom
现在保存
true
或
false
值。您只使用此变量初始化fancyBox一次，因此无需使用
data（）
或
attr（）
方法存储它以备以后使用。您的问题似乎更多的是查询而不是设置属性。不知道为什么要设置该属性，而您所需要的只是检索其数据以便稍后初始化fancyBox。
if($meZoom){ /*do the thing*/ }

var is_set = (typeof $(el).attr('data-attr') === 'undefined') ? true : false;

var is_set = (typeof $(el).data('attr') === 'undefined') ? true : false;

var el_data_attr = $(el).data('attr');
var is_set = (
      // If attribute is specified
      typeof el_data_attr !== 'undefined' 
      // And no value is given or value is evaluated to true
      && (el_data_attr === '' || el_data_attr)
   ) ? true : false;

var $meZoom = (
      $meData.hasOwnProperty('sgImgZoom') 
      && ($meData.sgImgZoom === '' || $meData.sgImgZoom)
) ? true : false;