2

Столкнулся с такой проблемой. Есть определенный контент, при котором при клике я добавляю и удаляю класс active. Весь такой код у меня работает. Но когда я добавляю динамически ещё контент, то класс к нему добавляется, но не удаляется. Подскажите как можно это решить?

CodePen: https://codepen.io/Power2021/pen/qBXQEbK?editors=1010.

const btn = document.querySelector('.btn');
const inputText = document.querySelector('.input-text');
const InputNumber = document.querySelector('.input-number');
const wrap = document.querySelector('.wrap');
const wrapItem = document.querySelectorAll('.wrap__item');

// Создаём элементы
btn.addEventListener('click', () => {
  const inputTextValue = inputText.value;
  const InputNumberValue = InputNumber.value;

  let item = `
    <div class="wrap__item">
      <div class="wrap__item-name">${inputTextValue}</div>
      <div class="wrap__item-cena">${InputNumberValue}</div>
    </div>
  `

  wrap.insertAdjacentHTML('beforeend', item);

})

// Добавление/Удаление active
wrap.addEventListener('click', (e) => {
  const target = e.target;
  const targetItem = target.closest('.wrap__item');
  if (targetItem) {
    for (let i = 0; i < wrapItem.length; i++) {
      wrapItem[i].classList.remove('active');
    }
    target.closest('.wrap__item').classList.add('active');
  }
});
* {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 15px;
}

.add {
  border: 2px solid #000;
  margin-top: 20px;
  padding: 20px;
}

.wrap {
  margin-top: 20px;
}

.wrap__item {
  max-width: 100px;
  position: relative;
  cursor: pointer;
}

.wrap__item:not(:last-child) {
  margin-bottom: 20px;
}

.wrap__item.active::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #000;
  position: absolute;
  top: 50%;
  right: 0;
}
<div class="container">
  <div class="add">
    <h1>Добавляем что-то</h1>
    <input class="input input-text" type="text" placeholder="Названия">
    <input class="input input-number" type="number" placeholder="Цена">
    <button class="btn">Добавить</button>
  </div>

  <div class="wrap">
    <div class="wrap__item active">
      <div class="wrap__item-name">Пункт</div>
      <div class="wrap__item-cena">22</div>
    </div>

    <div class="wrap__item">
      <div class="wrap__item-name">Пункт</div>
      <div class="wrap__item-cena">555</div>
    </div>

    <div class="wrap__item">
      <div class="wrap__item-name">Пункт</div>
      <div class="wrap__item-cena">22222</div>
    </div>
  </div>
</div>

2 ответа 2

1

Вообще можно было бы сделать по другому, добавлять новые input type="radio" и не нужно будет писать некоторую логику, которая есть у radio кнопок.
Я переписал ваш код на класс, может что-то интересное увидите у меня

class Wrap {
  wrapItemCollection = [];
  wrapNode = null;

  constructor({
    initialWrapItems,
    selectorWrap,
    selectorForm,
    selectorInputText,
    selectorInputNumber,
    selectorWrapItem
  }) {
    const form = document.querySelector(selectorForm);
    const inputTextNode = form.querySelector(selectorInputText);
    const inputNumberNode = form.querySelector(selectorInputNumber);
    this.wrapNode = document.querySelector(selectorWrap);

    this.createContentInWrapNode(initialWrapItems, this.wrapNode);
    this.addEventListenerForm(form, inputTextNode, inputNumberNode);
  }

  addEventListenerForm(form, inputTextNode, inputNumberNode) {
    form.addEventListener("submit", (event) => {
      event.preventDefault();

      const inputTextValue = inputTextNode.value;
      const InputNumberValue = inputNumberNode.value;

      const wrapItemNode = this.createWrapItemNode({
        name: inputTextValue,
        price: Number(InputNumberValue)
      });
      this.insertWrapItemIntoWrap(wrapItemNode, this.wrapNode);
      this.addEventListenerForWrapItem(wrapItemNode);

    });
  }

  createContentInWrapNode(initialWrapItems, wrapNode) {
    for (const wrapItemObj of initialWrapItems) {
      const wrapItemNode = this.createWrapItemNode(wrapItemObj);
      this.insertWrapItemIntoWrap(wrapItemNode, wrapNode);
      this.addEventListenerForWrapItem(wrapItemNode);
    }
  }

  createWrapItemNode({
    name,
    price,
    active
  }) {
    const wrapItemNode = document.createElement("div");
    wrapItemNode.classList.add("wrap__item");
    if (active === true) {
      wrapItemNode.classList.add('active');
    }
    wrapItemNode.innerHTML = `
            <div class="wrap__item-name">${name}</div>
            <div class="wrap__item-price">${price}</div>
        `;
    return wrapItemNode;
  }

  insertWrapItemIntoWrap(wrapItemNode, wrapNode) {
    wrapNode.append(wrapItemNode);
    this.wrapItemCollection.push(wrapItemNode);
  }

  addEventListenerForWrapItem(wrapItemNode) {
    wrapItemNode.addEventListener('click', (e) => {
      this.wrapItemCollection.forEach((item) => item.classList.remove("active"));
      wrapItemNode.classList.add("active");
    });
  }
}

new Wrap({
  initialWrapItems: [{
      name: "Пункт 1",
      price: 11,
      active: false
    },
    {
      name: "Пункт 2",
      price: 22,
      active: false
    },
    {
      name: "Пункт 3",
      price: 33,
      active: true
    },
  ],
  selectorWrap: '.wrap',
  selectorForm: '#form',
  selectorInputNumber: '.input-number',
  selectorInputText: '.input-text',
  selectorWrapItem: '.wrap__item'
});
* {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 15px;
}

.add {
  border: 2px solid #000;
  margin-top: 20px;
  padding: 20px;
}

.wrap {
  margin-top: 20px;
}

.wrap__item {
  max-width: 100px;
  position: relative;
  cursor: pointer;
}

.wrap__item:not(:last-child) {
  margin-bottom: 20px;
}

.wrap__item.active::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #000;
  position: absolute;
  top: 50%;
  right: 0;
}

.wrap__item-name {
  font-size: 1.5em;
}
<div class="container">
  <div class="add">
    <h1>Добавляем что-то</h1>
    <form id="form" class="form">
      <input class="input input-text" type="text" placeholder="Названия" required>
      <input class="input input-number" type="number" placeholder="Цена" required>
      <button type="submit" class="btn">Добавить</button>
    </form>
  </div>

  <div class="wrap">
  </div>
</div>

1
  • Спасибо за ответ. Для меня ещё этот код сложно понять. Так как с классами ещё не знаком. Но Ваш код по изучаю.
    – Alex
    15 ноя 2021 в 13:18
0
//const wrapItem = document.querySelectorAll('.wrap__item');
...
wrap.addEventListener('click', (e) => {
  const target = e.target;
  const targetItem = target.closest('.wrap__item');
  if (targetItem) {
    const wrapItem = document.querySelectorAll('.wrap__item'); // <---
    for (let i = 0; i < wrapItem.length; i++) {
      wrapItem[i].classList.remove('active');
    }
    target.closest('.wrap__item').classList.add('active');
  }
});
2
  • Спасибо за ответ. Очень помогли. Но у меня возник вопрос. Почему когда константа wrapItem в самом обработчике код работает? Но когда я её выношу в глобальную видимость, то уже код перестаёт работать?
    – Alex
    15 ноя 2021 в 13:13
  • @Alex вы сами на свой вопрос ответили. В глобальной области видимости выполняется 1 раз, а в обработчике на каждое событие. 15 ноя 2021 в 13:21

Ваш ответ

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

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