zoukankan      html  css  js  c++  java
  • 自制获取data-自定义属性

    jQuery.fn.dataset = function(attr, val) {
            // 获取数据集
            if (arguments.length == 0) {
                var dataset = {};
                jQuery(this).eq(0).each(function() {
                    var attrs = this.attributes;
                    for (var i = 0, l = attrs.length; i < l; i++) {
                        var attr = attrs[i];
                        if (/^data-/i.test(attr.name)) {
                            dataset[decode(encode(attr.name.substring(5)))] = autobox(attr.value);
                            if (decode(encode(attr.name.substring(5))) == "path") {
                                dataset[decode(encode(attr.name.substring(5)))] = attr.value != null ? String(attr.value) : null;
                            }
                            if (decode(encode(attr.name.substring(5))) == "name") {
                                dataset[decode(encode(attr.name.substring(5)))] = attr.value != null ? String(attr.value) : null;
                            }
                        }
                    }
                });
                return dataset;
            }
    
            // 返回指定数据
            if (arguments.length == 1 && typeof attr != 'object') {
                if(encode(attr) == "data-path"){
                    return this.attr(encode(attr));
                }
                return autobox(this.attr(encode(attr)));
            }
    
            // 设置数据集
            var dataset = attr;
            if (typeof attr != 'object') {
                dataset = {};
                dataset[attr] = String(val);
            }
            var tmp = {};
            jQuery.each(dataset, function(k, v) {
                tmp[encode(k)] = autobox(v);
            });
            return this.attr(tmp);
        };

    通过jQuery制作组件,可以轻松获取到我们data-的自定义属性,也可以给data-属性来赋值。

    获取:

    $("div").dataset("name")  //获取data-name的值

    赋值:

    $("div").dataset("name","Tezml")  //给data-name这个属性赋值为Tezml
  • 相关阅读:
    正则表达式分组小记
    Python中关于try...finally的一些疑问
    hello,world!
    02操控奴隶——掌握它的语言“Python”
    01操控奴隶——奴隶的构成与运行方式
    vue特殊属性 key ref slot
    vue内置组件 transition 和 keep-alive 使用
    vue文档全局api笔记2
    vue文档全局api笔记1
    vue 二三倍图适配,1像素边框
  • 原文地址:https://www.cnblogs.com/Tezml/p/4952161.html
Copyright © 2011-2022 走看看