Как можно использовать JavaScript код для работы с определённым блоком на моем сайте?

У вас есть два фильтра на странице. Как сделать так, чтобы каждый фильтр применялся только к своему соответствующему блоку?
  • 6 ноября 2024 г. 23:13
Ответы на вопрос 2
Для того чтобы использовать JavaScript для работы с определённым блоком на вашем сайте и применить фильтры, вы можете воспользоваться следующими шагами:

### 1. Структура HTML

Сначала убедитесь, что у вас есть структура HTML с двумя блоками и фильтрами. Например:

```html
<div id="filter-one">
    <h2>Фильтр 1</h2>
    <input type="text" id="input-filter-1" placeholder="Фильтр для блока 1">
    <div class="items-block" data-filter-group="1">
        <div class="item">Элемент 1.1</div>
        <div class="item">Элемент 1.2</div>
        <div class="item">Элемент 1.3</div>
    </div>
</div>

<div id="filter-two">
    <h2>Фильтр 2</h2>
    <input type="text" id="input-filter-2" placeholder="Фильтр для блока 2">
    <div class="items-block" data-filter-group="2">
        <div class="item">Элемент 2.1</div>
        <div class="item">Элемент 2.2</div>
        <div class="item">Элемент 2.3</div>
    </div>
</div>
```

### 2. JavaScript код

Далее вы можете написать JavaScript код для фильтрации элементов в каждом блоке.

```javascript
document.getElementById('input-filter-1').addEventListener('input', function () {
    let filterValue = this.value.toLowerCase();
    let items = document.querySelectorAll('#filter-one .items-block .item');

    items.forEach(item => {
        if (item.textContent.toLowerCase().includes(filterValue)) {
            item.style.display = "block"; // Показываем элемент, если он соответствует фильтру
        } else {
            item.style.display = "none"; // Скрываем элемент, если он не соответствует фильтру
        }
    });
});

document.getElementById('input-filter-2').addEventListener('input', function () {
    let filterValue = this.value.toLowerCase();
    let items = document.querySelectorAll('#filter-two .items-block .item');

    items.forEach(item => {
        if (item.textContent.toLowerCase().includes(filterValue)) {
            item.style.display = "block"; // Показываем элемент, если он соответствует фильтру
        } else {
            item.style.display = "none"; // Скрываем элемент, если он не соответствует фильтру
        }
    });
});
```

### Пояснение к коду

1. **События**: Мы добавляем события `input` на каждый из текстовых фильтров, чтобы слушать изменения в их значениях.
  
2. **Фильтрация**: Когда пользователь вводит текст в фильтр, мы получаем значение фильтра, приводим его к нижнему регистру и перебираем все элементы внутри соответствующего блока. Если текст элемента соответствует введенному значению, элемент остается видимым, иначе он скрывается.

Этот код позволяет вам разделить логику фильтрации по двум независимым блокам, так что каждый фильтр будет работать только с элементами своего блока.
Рефакторинг на тебе. 
Похожие вопросы