如何更改具有多个键值的自定义数据属性？

Question

我有一个 DOM

    <body id='bodeh' class="loading" data-layout-mode="horizontal" data-layout='{"mode": "light", "width": "fluid", "menuPosition": "fixed", "topbar": {"color": "light"}, "showRightSidebarOnPageLoad": false}'>

我想用 Jquery 将数据布局“模式”更改为暗。

任何帮助都感激不尽。 谢谢

Answer 1

使用 jQuery 的数据方法。 例如

const val = $(document.body).data("layout");
val.mode = "dark";
$(document.body).data("layout", val);

看到它在这里工作。

Answer 2

似乎您正在data-layout中写入 JSON 所以一种解决方案是将 JSON 解析为 object 修改它然后对其进行字符串化并设置数据属性。 我们可以为此编写一个简单的 function：

const useElemForData = (elem, dataAttr) => {
  return {
    setData(value) {
      elem.dataset[dataAttr] = JSON.stringify(value);
    },
    getData() {
      return JSON.parse(elem.dataset[dataAttr]);
    }
  };
};

现在，如果你想将它与data-layout和正文一起使用，你可以这样做：

const layoutData = useElemForData($("body"), "layout");

layoutData.setData({ ...layoutData.getData(), mode: "light" });

如何更改具有多个键值的自定义数据属性？

问题描述

2 个解决方案

解决方案1
0 2021-01-07 00:22:35

解决方案2
0 2021-01-07 00:26:31

如何更改具有多个键值的自定义数据属性？

问题描述

2 个解决方案

解决方案1 0 2021-01-07 00:22:35

解决方案2 0 2021-01-07 00:26:31

解决方案1
0 2021-01-07 00:22:35

解决方案2
0 2021-01-07 00:26:31