英文:
JavaScript: Clean way to set/remove a bool attribute
问题
用JavaScript时，我经常需要做这样的事情：
if (predicate) el.setAttribute('data-foo', '')
else el.removeAttribute('data-foo')
我真正想做的是这样（干净而干燥）：
el.setBoolAttribute('data-foo', predicate) // 期望的函数
这是我想在DOM和Web组件的影子根中多处使用的函数，因此我不太想从模块导入它。JavaScript 是否有任何本地方法？
英文:
With Javascript I often have to do something like this:
if (predicate) el.setAttribute('data-foo', '')
else el.removeAttribute('data-foo')
what I would really like to do is this (nice and DRY):
el.setBoolAttribute('data-foo', predicate) // Desired function
Its a function I would like to use in the DOM, and web component shadow roots, in many places, so its not really a function I would like to import from a module. Does Javascript have any sort of native way?
答案1
得分: 3
你可以使用 Element#toggleAttribute：
el.toggleAttribute('data-foo', predicate);
// 如果 predicate 为 true，则添加属性
// 如果为 false，则移除属性
英文:
You can use Element#toggleAttribute:
el.toggleAttribute('data-foo', predicate);
// if predicate is true, the attribute is added
// if it is false, the attribute is removed
答案2
得分: -1
你可以使用WeakMap将任何DOM元素映射到一个JavaScript对象。然后，你可以自由地使用JavaScript数据类型的所有功能：
// 一个全局变量
const domMap = new WeakMap;
// 初始化与元素相关的数据
domMap.set(document.body, { foo: true, bar: new Date() });
// 获取和设置...
console.log(domMap.get(document.body).foo); // true
console.log(domMap.get(document.body).bar); // (当前日期)
domMap.get(document.body).foo = false;
domMap.get(document.body).bar.setFullYear(2000);
consolelog(domMap.get(document.body).foo); // false
console.log(domMap.get(document.body).bar); // 2000年的今天
英文:
Alternatively you can use a WeakMap to map any DOM element to a JavaScript object. Then you are free to use all the power of JavaScript data types:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// One global variable
const domMap = new WeakMap;
// Initialise element-related data
domMap.set(document.body, { foo: true, bar: new Date() });
// Get and set...
console.log(domMap.get(document.body).foo); // true
console.log(domMap.get(document.body).bar); // (current date)
domMap.get(document.body).foo = false;
domMap.get(document.body).bar.setFullYear(2000);
console.log(domMap.get(document.body).foo); // false
console.log(domMap.get(document.body).bar); // Today in year 2000
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论