Как заменить такой код с jquery на чистом js

Question

("img[data-filter = "all"]").hide(500);

вот он все блоки с таким атрибутом скрывает. а как написать на чистом джс чтоб скрывал все с таким атрибутом? написал такой, но не работает.

img.forEach(i => {
i['data-filter = "all"'].style.display = 'none';
})

Как правильно выбрать все элементы с таким атрибутом чтоб не записывать какой то один атрибут в переменную, потому иногда будет надо выбрать элемент с другим атрибутов, или больше 1.

Answer 1

const attr = 'all'
const filters = document.querySelectorAll(`[data-filter="${attr}"]`)
filters.forEach(filter => hide(filter, 500));


// функция hide
function hide(element, duration) {
  let opacity = 1;
  const timer = setInterval(() => {
    if (opacity <= 0.1) {
      clearInterval(timer);
      element.style.display = 'none';
    }
    
    element.style.opacity = opacity;
    
    opacity -= opacity * 0.1;
  }, duration / 100);
}

<div data-filter="all">Filter</div>
<div data-filter="all">Filter</div>
<div data-filter="all">Filter</div>
<div data-filter="all">Filter</div>
<div data-filter="all">Filter</div>
<div data-filter="all">Filter</div>
<div data-filter="all">Filter</div>
<div data-filter="all">Filter</div>
<div data-filter="all">Filter</div>
<div data-filter="all">Filter</div>
<div data-filter="price">Price</div>

БЛОГ НА HUSL

Как заменить такой код с jquery на чистом js

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