javascript - 如何将 .children 方法添加到 if 语句中的 element[i]？

Question

我希望所有带有数字的按钮都具有属性data-number。

我正处于学习阶段。您能否也给我解释的解决方案？

const calculatorFooter = document.querySelector('.calculator-footer');
const calculatorButtons = document.querySelector('.calculator-footer__button');
// add attribute data-number to numbers 1-9
let buttonNumber = calculatorFooter.children;
let buttonAtribute = calculatorButtons;
for (i = 0; i < buttonNumber.length; i++) {
  if (buttonNumber[i].innerText.trim() <= 9) {
    buttonNumber[i]. ** children ** .setAttribute('data-number', '');
  }
}

<div class="calculator-footer">
  <div class="calculator-footer__button"><button>7</button></div>
  <div class="calculator-footer__button"><button>8</button></div>
  <div class="calculator-footer__button"><button>9</button></div>
  <div class="calculator-footer__button"><button>/</button></div>
  <div class="calculator-footer__button"><button>4</button></div>
  <div class="calculator-footer__button"><button>5</button></div>
  <div class="calculator-footer__button"><button>6</button></div>
  <div class="calculator-footer__button"><button>X</button></div>
  <div class="calculator-footer__button"><button>1</button></div>
  <div class="calculator-footer__button"><button>2</button></div>
  <div class="calculator-footer__button"><button>3</button></div>
  <div class="calculator-footer__button"><button>+</button></div>
  <div class="calculator-footer__button"><button>0</button></div>
  <div class="calculator-footer__button"><button>.</button></div>
  <div class="calculator-footer__button"><button>DEL</button></div>
  <div class="calculator-footer__button"><button>-</button></div>
  <div class="calculator-footer__button"><button>AC</button></div>
  <div class="calculator-footer__button"><button>CE</button></div>
</div>

标签： javascript

Answer 1

您可以从dataset属性访问 HTMLElement 属性

例子：

// HTML: <button data-number="3" />
const button = document.querySelector('#my-button');

button.dataset.number // "3"

所以你的代码将是：

 let buttonNumber = calculatorFooter.children;
 let buttonAtribute = calculatorButtons;
 for (i = 0; i < buttonNumber.length; i++) {
   if (buttonNumber[i].innerText.trim() <= 9) {
    // if your button have 'data-buttonNumber' attribute
     const buttonAttribute = buttonNumber[i].dataset.buttonNumber
     buttonNumber[i].setAttribute('data-number', buttonAttribute);
   }
 }