英文:
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); // trueconsole.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); // falseconsole.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 variableconst domMap = new WeakMap;// Initialise element-related datadomMap.set(document.body, { foo: true, bar: new Date() });// Get and set...console.log(domMap.get(document.body).foo); // trueconsole.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); // falseconsole.log(domMap.get(document.body).bar); // Today in year 2000
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论