首页 > 资讯 > JavaScript > 正文

使用jQuery的data读取标签缓存数据(二)

16-12-22 来源：[db:作者]

收藏我要投稿

因为使用 jQuery-1.7.2.js 版本，强制转成 number 后与原来的字符串在数值上存在误差。本来想使用1.11.2 版本的，可是发现页面中很多基于低版本 jQuery 扩展的插件会报错，这就尴尬了。

之后仔细查了下API，想出了两种解决方式：

1. 使用 attr(key) 方法直接获取放入的值，返回结果是字符串类型;

2. 因为 data(key) 返回类型有好几种，尝试将要缓存的数据进行封装，封装成字符串格式、数组格式或者对象格式(json)。

第1种方法就不细说了，这里详细说一下第2种方法。

先看 API 说明：

.data( key )

返回: Object

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

通过.data(name, value)或HTML5 data-* 属性设置

返回值转换的过程：

每次尝试将字符串转换为一个JavaScript值(包括布尔值(booleans)，数字(numbers)，对象(objects)，数组(arrays)和空(null))。尤其是纯数字的字符串，如果不改变值的表示，那么该值将转换为一个数字(number)。

“1E02”和“100.000”是等同于数字(数字值100)，但将转换它们会改变表示，所以保留为字符串。而字符串值“100”被转换为数字100。

查看API

经过尝试后发现可以使用数组格式([、])或者对象格式({、})对数据进行封装。

这里的数据是 jsp 页面中用 jstl 标签放入的值。

这是测试用的 jsp 页面， jQuery 版本是 1.7.2

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery data 测试</title>
<script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
</head>
<body>
<c:set var="uuid" value="201612121641078700726"></c:set>
<div class="container" style="width:80%;margin:40px;auto">
    <div data-resourceuuid="${uuid}" >
    <a href="javascript：void(0);" onclick="testStr(this,1)">点击测试</a> data-resourceuuid='"201612121641078700726"'</div>
    <p class="result-str1"></p><br/>
    <div data-resourceuuid='"${uuid}"' >
    <a href="javascript：void(0);" onclick="testStr(this,2)">点击测试</a> data-resourceuuid='"201612121641078700726"'</div>
    <p class="result-str2"></p><br/>
    <div data-resourceuuid='[ "${uuid}" ]' >
    <a href="javascript：void(0);" onclick="testArray(this, 1)">点击测试</a> data-resourceuuid='["201612121641078700726"]'</div>
    <p class="result-array1"></p><br/>
    <div data-resourceuuid='[ "${uuid}" , "123"]' >
    <a href="javascript：void(0);" onclick="testArray(this, 2)">点击测试</a> data-resourceuuid='["201612121641078700726","123"]'</div>
    <p class="result-array2"></p><br/>
    <div data-resourceuuid="[ '${uuid}' ]" >
    <a href="javascript：void(0);" onclick="testArray(this, 3)">点击测试</a> data-resourceuuid="['201612121641078700726']"</div>
    <p class="result-array3"></p><br/>
    <div data-resourceuuid="[ '${uuid}' , '123']" >
    <a href="javascript：void(0);" onclick="testArray(this, 4)">点击测试</a> data-resourceuuid="['201612121641078700726','123']"</div>
    <p class="result-array4"></p><br/>
    <div data-resourceuuid='{"uuid":"${uuid}"}' >
    <a href="javascript：void(0);" onclick="testObj(this,1)">点击测试</a> data-resourceuuid='["uuid":"201612121641078700726"]'</div>
    <p class="result-obj1"></p><br/>
    <div data-resourceuuid='{uuid:"${uuid}"}' >
    <a href="javascript：void(0);" onclick="testObj(this,4)">点击测试</a> data-resourceuuid='[uuid:"201612121641078700726"]'</div>
    <p class="result-obj4"></p><br/>
    <div data-resourceuuid="{'uuid':${uuid}}" >
    <a href="javascript：void(0);" onclick="testObj(this,2)">点击测试</a> data-resourceuuid="{'uuid':201612121641078700726}"</div>
    <p class="result-obj2"></p><br/>
    <div data-resourceuuid="{uuid:${uuid}}" >
    <a href="javascript：void(0);" onclick="testObj(this,3)">点击测试</a> data-resourceuuid="{uuid:201612121641078700726}"</div>
    <p class="result-obj3"></p><br/>
</div>
        <script type="text/javascript">
            function testStr(obj,index){
                var resourceid = $(obj).parent().data("resourceuuid");
                $("p.result-str"+index).text("resourceuuid="+resourceid+", type ="+ typeof resourceid);
            };
            function testArray(obj,index){
                var resourceid = $(obj).parent().data("resourceuuid");
                var msg = "resourceuuid="+resourceid+", type ="+ typeof resourceid;
                if(Array.isArray(resourceid))
                msg="resourceuuid="+resourceid+", type ="+Object.prototype.toString.call(resourceid) +", resourceuuid[0]="+resourceid[0];
                $("p.result-array"+index).text(msg);
            };
            function testObj(obj,index){
                var resourceid = $(obj).parent().data("resourceuuid");
                var msg = "resourceuuid="+resourceid+", type ="+ typeof resourceid;
                if(typeof resourceid === "object")
                msg="resourceuuid="+resourceid+", type ="+ typeof resourceid+", resourceuuid.uuid="+resourceid.uuid;
                $("p.result-obj"+index).text(msg);
            };
        </script>
</body>
</html>

点击后，页面显示内容：

点击测试 data-resourceuuid=‘“201612121641078700726”’
resourceuuid=201612121641078700000, type =number

点击测试 data-resourceuuid=‘“201612121641078700726”’
resourceuuid=”201612121641078700726”, type =string

点击测试 data-resourceuuid=’[“201612121641078700726”]’
resourceuuid=201612121641078700726, type =[object Array], resourceuuid[0]=201612121641078700726

点击测试 data-resourceuuid=’[“201612121641078700726”,”123”]’
resourceuuid=201612121641078700726,123, type =[object Array], resourceuuid[0]=201612121641078700726

点击测试 data-resourceuuid=”[‘201612121641078700726’]”
resourceuuid=[ ‘201612121641078700726’ ], type =string

点击测试 data-resourceuuid=”[‘201612121641078700726’,’123’]”
resourceuuid=[ ‘201612121641078700726’ , ‘123’], type =string

点击测试 data-resourceuuid=’[“uuid”:”201612121641078700726”]’
resourceuuid=[object Object], type =object, resourceuuid.uuid=201612121641078700726

点击测试 data-resourceuuid=’[uuid:”201612121641078700726”]’
resourceuuid={uuid:”201612121641078700726”}, type =string

点击测试 data-resourceuuid=”{‘uuid’:201612121641078700726}”
resourceuuid={‘uuid’:201612121641078700726}, type =string

点击测试 data-resourceuuid=”{uuid:201612121641078700726}”
resourceuuid={uuid:201612121641078700726}, type =string

注意：

使用 data-* 缓存数据，并将数据赋值时：

在进行数组格式赋值，最外层用单引号 (”) 包裹，数组元素应双引号 (“”) 包裹字符串;

在进行对象格式赋值时，外层用单引号 (”) 包裹，里面的key应用双引号 (“”) 包裹，value 为 string 类型是用双引号包裹;

在进行字符串格式赋值时，1.7.2 版本能转换 number 时会强制转换 number，可能会出现误差，用高版本(1.11.2)则没问题。低版本参照上面两条进行转换或使用 attr 获取 string 类型数据。

点击复制链接与好友分享!回本站首页