Как использовать в data атрибуте имя с дефисом через dataset?

Question

Нужно получить значение атрибута data-items-number через dataset

Значение постоянно обновляется, в том числе динамический сам блок <div class="counts">...</div>

Есть способ получать через getAttribute, но не уверен что будет работать стабильно при больших объемах данных и массовых изменениях

document.addEventListener('click',function(e) {
  if (e.target.closest('.counts .dropdown > div')) {
    console.log(e.target.dataset['items-number']);
  }
  if (e.target.closest('.counts2 .dropdown > div')) {
    console.log(e.target);
    console.log(e.target.dataset.itemsNumber);
  }
});

.dropdown > div {
  cursor: pointer;
  display: inline-block;
  padding: 5px;
  margin: 5px;
  color: #06f;
  border: 1px solid #06f;
  border-radius: 5px;
}

<div class="counts">
  <div class="dropdown">
    <div data-items-number="1">Пример</div>
  </div>
</div>
<div class="counts2">
  <div class="dropdown">
    <div data-itemsNumber="1">Пример 2</div>
  </div>
</div>

Answer 1

Правило такое: что имена в самом html пишутся через дефис, а в JS пишутся через camelCase, не считая префикс data-

То есть в html атрибут data-items-number, а в JS будет обращение таким: dataset.itemsNumber

БЛОГ НА HUSL

Как использовать в data атрибуте имя с дефисом через dataset?

Ответы (1 шт):