• 自制获取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
  • 相关阅读:
    vue组件通信类型限制
    vue父子组件通信
    vue组件data必须是函数
    vue组件模块抽离
    vue局部组件语法糖
    leetcode刷题-47全排列2
    leetcode刷题-46全排列
    leetcode刷题-43字符串相乘
    leetcode刷题-40组合总和2
    leetcode刷题-39组合总和
  • 原文地址:https://www.cnblogs.com/Tezml/p/4952161.html
Copyright © 2020-2023  润新知