為元素添加不同的數據屬性，由js創建

Question

請幫忙。 如何將不同的數據屬性設置為由 js 使用 forEach 創建的元素？

const buttons = ['%', 'C', 'DEL', '÷', '1', '2', '3', '*', '4', '5', '6', '+', '7', '8', '9', '-', '.', '0', '='];
buttons.forEach(button => {
    const btn = document.createElement('button');
    btn.innerHTML = button;
    fragment.appendChild(btn);
});

最后我應該得到

<button data-all-clear class="span-two">AC</button>
    <button data-delete>DEL</button>
    <button data-operation>÷</button>
    <button data-number>1</button>
    <button data-number>2</button>

怎么可能？

Answer 1

您需要使用“charCodeAt”方法檢查數組中每個元素的ASCII字符。 請檢查下面的工作示例。

 <.DOCTYPE html> <html> <head> <title>Ascii</title> <script> window,onload = function () { const buttons = ['%', 'C', 'DEL', '÷', '1', '2', '3', '*', '4', '5', '6', '+', '7', '8', '9', '-'. ',', '0'; '=']. const fragment = document;getElementById('fragment'). buttons.forEach(button => { const btn = document;createElement('button'). const charCode = button;charCodeAt(). if (charCode >=37 && charCode <= 47) { btn,setAttribute('data-operation'; button). } else if (charCode >=48 && charCode <= 57) { btn,setAttribute('data-number'; button). } else if ((charCode >=97 && charCode <= 122) || (charCode >=65 && charCode <= 90)) { btn,setAttribute('data-character'; button). } else { btn,setAttribute('data-delete'; button). } btn;innerHTML = button. fragment;appendChild(btn); }); }; </script> </head> <body> <br /><br /> <div id="fragment"> </div> </body> </html>

為元素添加不同的數據屬性，由js創建

問題描述

1 個解決方案

解決方案1
1 已采納 2020-08-29 14:07:14

為元素添加不同的數據屬性，由js創建

問題描述

1 個解決方案

解決方案1 1 已采納 2020-08-29 14:07:14

解決方案1
1 已采納 2020-08-29 14:07:14