Переписать код с jquery на чистый Js?

Question

[Zara-Zara]

Здравствуйте! Помоги с кодом переписать на чистый JS?
Сам код:

$(document).ready(function () {        
    $('.card__item').click(function (e) { 
        e.preventDefault;   
      if (e.target.classList == 'card__button'){
          $(this).closest('.card__item').addClass('active');
          $(this).closest('.card__item').find('.card__block').slideUp();
          $(this).closest('.card__item').find('.card__booked').slideDown();
          $(this).off("mouseleave");
          return
      }

      $(this).mouseleave(function () {
        $(this).closest('.card__item').removeClass('active');
        $(this).find('.card__block').slideDown();
        $(this).find('.card__booked').slideUp();
      })      
    });
});

мои попытки:

const cards = document.querySelector('.card__items'),
	card = document.querySelectorAll('.card__item'),
	cardBlock = document.querySelectorAll('.card__block'),
	cardBooked = document.querySelectorAll('.card__booked');
cards.addEventListener('click mouseout', (event) => {
	let target = event.target;
	if (target && target.classList.contains('card__button')) {
		this.closest(card).classList.add('active');
		this.closest(card).find(cardBlock).slideUp();
		this.closest(card).find(cardBooked).slideDown();
		this.removeEventListener("mouseleave");
		return
	}
	document.querySelector(this).mouseleave(function () {
		this.removeClass('active');
		this.cardBlock.slideDown();
		this.cardBooked.slideUp();
	})
});

Comments

[Сергей Сергей]

"Убрать доллар" не значит чистый джаваскрипт.
https://github.com/nefe/You-Dont-Need-jQuery/blob/...

[Антон Литвиненко]

первое что теряется при переписывании на ваниль - это множество отличных готовых функций типа slideUp, slideDown итд.

[Zara-Zara]

Nikita Galadiy, https://jsfiddle.net/yrw1p3sk/
Есть три одинаковых блока с кнопкой, при клике по кнопке именно этому блоку добавить класс и действие выполнится только после того, как курсор покинет карточку. И снова при клике, только уже по всему блоку, класс удаляется.

[Zara-Zara]

Сергей Сергей, спасибо за ссылку!

[Александр]

Zara-Zara, Имейте ввиду, что когда Вы в jQuery пишите $(selector).on(...), то событие добавится на все элементы. Вам надо либо через document.querySelectorAll это сделать, либо через делегирование событий.

Answer 1

[Zara-Zara]

одну часть сделала, но цикл закончился и заново не запускается,а второй обработчик события срабатывает сразу на все карточки, как исправить?

let n = 0;
cards.addEventListener('click', (event) => {
	let target = event.target;
	if (target.classList.contains("card__button")) {
		
		if (n == card.length) {
			n == 0;
		}
		card[n].classList.add('active');
		cardBooked[n].style.display = 'block';
		cardBlock[n].style.display = 'none';
		n++;
	}
});
cards.addEventListener('click', (event) => {
	let target = event.target;
	if (target.classList.contains("card__item")) {
		for (let i = 0; i < card.length; i++) {
			card[i].classList.remove('active');
			cardBooked[i].style.display = 'none';
			cardBlock[i].style.display = 'block';
		}
	}
});