JQuery 数据缓存 data()

原创已于 2022-06-24 13:58:20 修改 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#JQuery #data #缓存数据

收录于

于 2020-01-31 02:49:38 首次发布

前端相关专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍jQuery中$(select).data(key,value)方法的应用，包括如何缓存元素的自定义属性，如left和top的像素值，并在后续操作中如何读取并利用这些缓存数据进行元素位置的调整。

本篇文章给大家介绍本人最常用到的jQuery方法之一 $(select).data(key,value) ——这是jQuery提供的数据缓存方法。
1、缓存数据

    function createTag(tagId, x, y){
        var tag=$('<img class="dingwei-map-tag" id=' + tagId + ' onclick="showinfo(this)"></img>');
        tag.css('left', x + 'px');
        tag.css('top', y + 'px');
        tag.data("left", x);     //data中自定义属性left像素缓存
        tag.data("top", y);     //data中自定义属性top像素缓存
        $('#dingweiContent').append(tag);
    }

2、使用缓存数据

    function adjustTagPos(zoom){
        $(".dingwei-map-tag").each(function(){
            var tag = $(this);
            var x = tag.data("left");     //data中自定义属性left像素缓存
            var y = tag.data("top");     //data中自定义属性top像素缓存
            tag.css('left', x * zoom / 100 + 'px');
            tag.css('top', y * zoom / 100 + 'px');
        })
    }