Как найти один элемент массива в другом Javascript? Как связать кнопки с картинками

Question

Прошу помощи в следующем вопросе: надо чтобы при нажатии кнопок картинки не связанные с кнопкой уходили в блюр. Делаю так: при нажатии на кнопку InnerText кнопки уходит в отдельный массив arrayBtn, при повторном нажатии он удаляется. У картинок есть один общий класс и три класса по группам, их названия совпадают с InnerText трех кнопок. При совпадении элемента массива с кнопками и не совпадением его элементами массива картинок - они блюрятся присвоением отдельного класса. Пытался разными вариантами, думал сделать через arrayBtn.includes('название класса картинки'), но все без толку. Как получится совпадение между массивом кнопок и массивом картинок? На фото результат однократного нажатия на одну из кнопок.

const serviceBtn = document.querySelectorAll('.service-button'); // массив кнопок в секции Service
const arrayPictures = Array.from(document.querySelectorAll(['.gardens', '.planting', '.lawn']));
let arrayBtn = [];

serviceBtn.forEach(button => { button.addEventListener('click', (e) => {
    
    button.classList.toggle('service-button-active'); // переключает кнопку в активное состояние при клике
    let smallBtnInnerText = button.innerText.toLowerCase(); //transform InnetText og button to LowerCase

    if (!arrayBtn.includes(smallBtnInnerText) && (arrayBtn.length <= 1)) {
        arrayBtn.push(smallBtnInnerText) 

    } else if (arrayBtn.includes(smallBtnInnerText)) {
        arrayBtn.splice(arrayBtn.indexOf(smallBtnInnerText), 1)
      
    }
    // const found = arrPicturesService.some(r=> arrayBtn.includes(r))
    // console.log(found)

    console.log(arrayBtn)
    console.log(arrayPictures)
    console.log(Array.isArray(arrayBtn))
    console.log(Array.isArray(arrayPictures))

Answer 1

Если я правильно понял задачу, тогда вот так:

const btns = [...document.querySelectorAll('.btn')];

const imgs = [...document.querySelectorAll('.img')];

const resetBtn = document.querySelector('#reset');

btns.map((item, id) => {
  item.addEventListener('click', (event) => {
    imgs.map((img, i) => {
      i !== id ? img.classList.add('blured') : img.classList.remove('blured')
    });
  });
});

resetBtn.addEventListener('click', () => {
  imgs.map(img => {
    if (img.classList.contains('blured'))
      img.classList.remove('blured');
  });
});

.img-wrapper {
  float: left;
}

.img-wrapper>img {
  width: 100px;
}

.fix {
  clear: both;
  margin-bottom: 20px;
}

.blured {
  filter: blur(10px);
}

<div class="img-wrapper"><img class="img" src="https://oir.mobi/uploads/posts/2020-10/1603682923_24-p-stich-art-40.png" alt="Zay" /></div>
<div class="img-wrapper"><img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRa7OyWo598KWqXOPXyymnfokXd7HQwKrdXRfCU2Cchl7xUz8TdAQKv3bX7U6RchilfVtk&usqp=CAU" alt="Zay" /></div>

<div class="img-wrapper"><img class="img" src="https://celes.club/uploads/posts/2022-10/1667221816_9-celes-club-p-art-milii-stich-instagram-10.jpg" alt="Zay" /></div>
<div class="fix"></div>
<button class="btn">klick me</button>
<button class="btn">klick me</button>
<button class="btn">klick me</button>
<button id="reset">reset</button>

БЛОГ НА HUSL

Как найти один элемент массива в другом Javascript? Как связать кнопки с картинками

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