Как сделать замену под конкретный класс css, а не общий поиск?

Question

[SHKD]

Приветствую,
Есть код который работает сейчас так: при скролле находится все элементы с классом и им присваивается класс из списка. Пр: элемент 1 подбор класса из 1 2 3

Как сделать так, чтобы при скролле конкретным элементам подставлялись конкретные классы? Пр: элемент 1 класс 1, элемент 2 класс 2. А не добавлялось все.

function onEntry(entry) {
  entry.forEach(change => {
    if (change.isIntersecting) {
      change.target.classList.add('card-effect-on');
      change.target.classList.add('image-effect-on');
    }
    else {
      change.target.classList.remove('card-effect-on');
      change.target.classList.remove('image-effect-on');
    }
  });
}
let options = {
  threshold: [0.5] };
let observer = new IntersectionObserver(onEntry, options);
let elements = document.querySelectorAll('.card-effect-off, .image');

for (let elm of elements) {
  observer.observe(elm);
}

Т,к. .card-effect-off должен при скролле присвоится класс card-effect-on,
а .image должен при скролле присвоится класс image-effect-on. И так на всех совпадениях.

Comments

[Вадим]

Ну логично что нужно делать проверку. Насколько я понял вопрос, Вам нужно сделать так:

function onEntry(entry) {
  entry.forEach(change => {
    const element = change.target
    if (change.isIntersecting) {
      const isCardEffect = element.classList.contains('card-effect-off')
      const isImage = element.classList.contains('image')
      if (isCardEffect) {
        element.classList.add('card-effect-on');
      }
      if (isImage) {
        element.classList.add('image-effect-on');
      }
    }
    else {
      element.classList.remove('card-effect-on');
      element.classList.remove('image-effect-on');
    }
  });
}

[SHKD]

Вадим, СПАСИБО!

Answer 1

[Вадим]

Ну логично что нужно делать проверку. Насколько я понял вопрос, Вам нужно сделать так:

function onEntry(entry) {
  entry.forEach(change => {
    const element = change.target
    if (change.isIntersecting) {
      const isCardEffect = element.classList.contains('card-effect-off')
      const isImage = element.classList.contains('image')
      if (isCardEffect) {
        element.classList.add('card-effect-on');
      }
      if (isImage) {
        element.classList.add('image-effect-on');
      }
    }
    else {
      element.classList.remove('card-effect-on');
      element.classList.remove('image-effect-on');
    }
  });
}

Comments

[Вадим]

SHKD, отмечаем решением?

[SHKD]

Так точно!