当前位置: 首页 > 编程笔记 >

使用jQuery获取data-的自定义属性

华建同
2023-03-14
本文向大家介绍使用jQuery获取data-的自定义属性,包括了使用jQuery获取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

 类似资料:
  • 问题内容: 给定一个具有零个或多个属性的任意HTML元素,如何检索数据的键值对列表。 例如: 我希望能够以编程方式检索此: 使用jQuery(v1.4.3),如果事先知道键,则使用来访问数据的单个位很简单,但是使用任意数据集如何做到这一点并不明显。 我正在寻找一个“简单的”jQuery解决方案(如果存在),但不介意采用较低级别的方法。我可以尝试解析,但是缺少javascript-fu会让我失望。

  • 问题内容: 在某些元素具有自定义CSS属性的应用程序中,是否可以通过JavaScript检索此类值? 例如 我可以通过以下两种方法访问color属性: 但是这些不适用于自定义属性。完全支持吗? 问题答案: 浏览器无法理解的CSS值将被丢弃,这说明了为什么无法通过来获取CSS值。 过去,您不得不依靠存储具有数据属性的数据并自己通过JavaScript处理继承。 但是,自此以来,“自定义属性”(也称为

  • 我试图在woocommerce中获得一个特定的自定义属性。我在这个网站上读了很多文章,其中提供了3-5种方法。在尝试了所有方法之后,对我来说唯一有效的方法就是循环所有属性——所有其他属性都不起作用。我有一个名为“pdfs”的自定义属性 以下尝试不起作用:(链接) 这是唯一的一个工作:(链接) 我更希望能够使用第一个选项之一。任何帮助都将不胜感激。谢谢

  • 当我进入产品编辑页面时,有一个选项卡“属性”。在那里我可以设置属性名及其值。 我假设这就是在Woocommerce上为产品添加自定义属性的方式。 但是如何在循环中得到这个值呢? 我看到人们使用,但它希望我传递分类法和另一个参数数组。分类学是什么?我没有手动添加。论点是什么?

  • 问题内容: 这是使用jQuery获取一个CSS属性的方法: 您如何全部获得?(无需指定,最好采用以下格式,以便以后可以在jQuery中重新应用): 谢谢!! 编辑 我尝试获取的方法在样式表中声明(它们不是内联的)。抱歉,未指定。 问题答案: 使用jQuery属性选择器查看此实时示例

  • 问题内容: 在Woocommerce中,我试图获取产品自定义属性值,但我失败了,我一无所获。 所以我尝试了: 我正在获取这些原始数据: 我知道有一个值,因为它显示在属性部分,但是我只是找不到一种方法来将其显示在我的自定义代码中。 问题答案: 编辑* : 自Woocommerce版本3起已弃用 * 按照@datafeedr在他的答案中写道: 甚至更紧凑: 原始答案: