0

Нужно чтобы, по клику на строку, увеличивался score в аргументе data. Например по клику на "TEST03" увеличивался score +1 в аргументе "id: '2', score: 7, value: 'Item 3'" -> "id: '2', score: 8, value: 'Item 3'"

Моя проблема в том, что я не могу найти способ как узнать порядковый номер .item по счету в .container Пытался с getelementsbyclassname но не вышло.

  class TestContainer {
    constructor(selector, options) {
      this.$container = document.querySelector(selector);
      this.options = options;
      this.#setup();
    }
  
    #setup() {
      this.clickHandler = this.clickHandler.bind(this);
      this.$container.addEventListener('click', this.clickHandler);
    }

    clickHandler(event, options) {
      const { type } = event.target.dataset;

      const { data } = this.options;
      this.$containerItem = this.$container.querySelectorAll('.item');

  
      console.log(this.$containerItem)
      console.log(data[1].score)

      //TODO при нажатии менять data score
    }
  }
  
  const testContainer = new TestContainer('.container', {
    
    data: [
      { id: '0', score: 7, value: 'Item 1' },
      { id: '1', score: 7, value: 'Item 2' },
      { id: '2', score: 7, value: 'Item 3' },
      { id: '3', score: 7, value: 'Item 4' },
    ],
  });
  window.testContainer = testContainer;
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="container">
        <li class="item">TEST01</li>
        <li class="item">TEST02</li>
        <li class="item">TEST03</li>
        <li class="item">TEST04</li>
    </ul>

</body>
</html>

6
  • Пример как получить номер в конце: +(this.$containerItem[0].innerText.replace(/TEST\d/, ''))
    – ΝNL993
    7 июн 2022 в 19:37
  • Не совсем понятно, как это использовать.. console.log(this.$containerItem+this.$containerItem[0].innerText.replace(/TEST\d/, '')) если так то выводит: [object NodeList]1
    – NaN-Simon
    7 июн 2022 в 19:48
  • Вы чушь какую-то выводите, +(this.$containerItem[0].innerText.replace(/TEST\d/, '')) это нужно использовать для выбора id-шника, к примеру: testContainer.data[+(this.$containerItem[0].innerText.replace(/TEST\d/, ''))], вот это выделит нужного ребёнка data-ы, то есть на клик сохраняете в event-е в переменную id-шник, а уже используя его можете манипулировать вашим тестовым контейнером.
    – ΝNL993
    7 июн 2022 в 19:53
  • вы предлагаете получать порядковый номер исходя из innerText, мне это не походит. а если там нет цифр? например просто TEST TEST TEST TEST
    – NaN-Simon
    7 июн 2022 в 19:56
  • Тогда выдаёте каждому из .item в dataset уни. id, вот пример: for (let i in document.querySelectorAll('.item')) { document.querySelectorAll('.item')[i].dataset.id = i }(Этот код вставить в самом начале), а дальше просто через датасет выбирать элемент (Element.dataset.id).
    – ΝNL993
    7 июн 2022 в 19:59

1 ответ 1

1

Такой простой вариант не подходит?

const container = document.querySelector('.container');
const elements = Array.from(container.children);

container.addEventListener('click', (evt) => {
  const clickedElement = evt.target;
  console.log(elements.indexOf(clickedElement));
});
<ul class="container">
  <li class="item">TEST01</li>
  <li class="item">TEST02</li>
  <li class="item">TEST03</li>
  <li class="item">TEST04</li>
</ul>

4
  • Ни дурно, ни дурно.
    – ΝNL993
    7 июн 2022 в 20:03
  • Нет, такой не подходит. Я для вопроса упростил код. Это лишь часть которую нужно внедрить в динамический компонент. =\ codepen.io/nan-simon/pen/QWQVBPZ
    – NaN-Simon
    7 июн 2022 в 20:10
  • Еще как вариант можно делать отдельный класс на строку: в экземпляре будет и объект со всеми параметрами, и обработчик кликов.
    – novvember
    7 июн 2022 в 20:27
  • Да, теперь когда дали подсказку с атрибутами, доработаю)
    – NaN-Simon
    7 июн 2022 в 20:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.