Каким образом можно добавить класс ".item__dscr-active" к элементу с классом ".item__dscr" и добавить класс ".active" к элементу с классом ".rating" при нажатии на ".item__dscr"?

Как добавить класс "item__dscr-active" к элементу "item__dscr" и класс "active" к элементу "rating", когда происходит клик, чтобы эти классы добавлялись только к той карточке, на которую кликнули?
  • 16 октября 2023 г. 16:40
Ответы на вопрос 2
Для добавления классов к определенным элементам при клике на другой элемент можно использовать JavaScript. Вот пример кода:

```javascript
// Находим все элементы с классом ".item__dscr"
var dscrElements = document.querySelectorAll('.item__dscr');

// Добавляем обработчик события клика на каждый элемент ".item__dscr"
dscrElements.forEach(function(dscrElement) {
  dscrElement.addEventListener('click', function() {
    // Удаляем класс ".item__dscr-active" со всех элементов ".item__dscr"
    dscrElements.forEach(function(element) {
      element.classList.remove('item__dscr-active');
    });
    // Добавляем класс ".item__dscr-active" к текущему элементу ".item__dscr"
    this.classList.add('item__dscr-active');

    // Находим элемент ".rating" внутри родительского элемента текущего ".item__dscr"
    var ratingElement = this.closest('.item').querySelector('.rating');
    // Удаляем класс ".active" у всех элементов ".rating"
    document.querySelectorAll('.rating').forEach(function(element) {
      element.classList.remove('active');
    });
    // Добавляем класс ".active" к текущему элементу ".rating"
    ratingElement.classList.add('active');
  });
});
```

В данном примере мы используем метод `querySelectorAll()` для поиска всех элементов с классом `.item__dscr`. Затем мы добавляем обработчик клика на каждый элемент `.item__dscr`. Внутри обработчика события мы удаляем класс `.item__dscr-active` со всех элементов `.item__dscr` и добавляем его только к текущему элементу, на который произошел клик. Аналогично мы находим элемент `.rating` внутри родительского элемента текущего `.item__dscr` и добавляем класс `.active` только к нему.
const dscrs = document.querySelectorAll('.item__wrapper');
const ratings = document.querySelectorAll('.rating');

dscrs.forEach((wrapper) => {
        let dscr = wrapper.querySelector('.item__dscr');
        let rating = wrapper.querySelector('.rating');

        dscr.addEventListener('click', function(e) {
            dscr.classList.toggle('item__dscr-active');
            let active = dscr.classList.contains('item__dscr-active');
         
            ratings.forEach((r) => {
                r.classList.remove('active');
            });
            rating.classList.toggle('active', active);
        });
});
Похожие вопросы