Сталкивался кто-нибудь, как переделать из querySelector в querySelectorall?

Question

[fom4ik666]

Всем привет, ребят подскажите пожалуйста как переделать в querySelectorall , так как получается у меня 5 одинаковых слайдеров а кнопки работают только для одного , для первого.

const slider = document.querySelector("[data-slider]");
const track = slider.querySelector("[data-slider-track]");
const prev = slider.querySelector("[data-slider-prev]");
const next = slider.querySelector("[data-slider-next]");

if (track) {
	
    prev.addEventListener("click", () => {
    next.removeAttribute("disabled");

    track.scrollTo({
      left: track.scrollLeft - track.firstElementChild.offsetWidth,
      behavior: "smooth"
    });
  });

  next.addEventListener("click", () => {
    prev.removeAttribute("disabled");

    track.scrollTo({
      left: track.scrollLeft + track.firstElementChild.offsetWidth,
      behavior: "smooth"
    });
  });

  track.addEventListener("scroll", () => {
    const trackScrollWidth = track.scrollWidth;
    const trackOuterWidth = track.clientWidth;

    prev.removeAttribute("disabled");
    next.removeAttribute("disabled");

    if (track.scrollLeft <= 0) {
      prev.setAttribute("disabled", "");
    }

    if (track.scrollLeft === trackScrollWidth - trackOuterWidth) {
      next.setAttribute("disabled", "");
    }
  });

}// JavaScript Document

Answer 1

[Дмитрий Беляев]

Нужно слайдеры в цикле обрабатывать. Выше уже предложили одно из решений, но в нём есть нюанс - создание функций в цикле достаточно дорого по ресурсам (мы же заботимся о наших пользователях?), благо есть альтернатива, в качестве слушателя события может быть не только функция, но и объект с методом handleEvent:

class PrevClickListener {
    constructor(track, next) {
        this.track = track;
        this.next = next;
    }

    handleEvent() {
        const {track, next} = this;
        next.removeAttribute('disabled');
        track.scrollTo({
            left: track.scrollLeft - track.firstElementChild.offsetWidth,
            behavior: 'smooth',
        });
    }
}

class NextClickListener {
    constructor(track, prev) {
        this.track = track;
        this.prev = prev;
    }

    handleEvent() {
        const {track, prev} = this;
        prev.removeAttribute('disabled');
        track.scrollTo({
            left: track.scrollLeft + track.firstElementChild.offsetWidth,
            behavior: 'smooth',
        });
    }
}

class TrackScrollListener {
    constructor(track, prev, next) {
        this.track = track;
        this.prev = prev;
        this.next = next;
    }

    handleEvent() {
        const {track, next, prev} = this;
        const trackScrollWidth = track.scrollWidth;
        const trackOuterWidth = track.clientWidth;

        prev.removeAttribute('disabled');
        next.removeAttribute('disabled');

        if (track.scrollLeft <= 0) {
            prev.setAttribute('disabled', '');
        }

        if (track.scrollLeft === trackScrollWidth - trackOuterWidth) {
            next.setAttribute('disabled', '');
        }
    }
}

const sliders = document.querySelectorAll('[data-slider]');
for (const slider of sliders) {
    const track = slider.querySelector('[data-slider-track]');
    const prev = slider.querySelector('[data-slider-prev]');
    const next = slider.querySelector('[data-slider-next]');
    if (!track || !prev || !next) continue;

    prev.addEventListener('click', new PrevClickListener(track, next));
    next.addEventListener('click', new NextClickListener(track, prev));
    track.addEventListener('scroll', new TrackScrollListener(track, prev, next));
}

Answer 2

[Николай]

const sliders = document.querySelectorAll("[data-slider]");

sliders.forEach(slider => {
	const track = slider.querySelector("[data-slider-track]");
	const prev = slider.querySelector("[data-slider-prev]");
	const next = slider.querySelector("[data-slider-next]");

	if (track) {

		prev.addEventListener("click", () => {
			next.disabled = false;
			// next.removeAttribute("disabled");

			track.scrollTo({
				left: track.scrollLeft - track.firstElementChild.offsetWidth,
				behavior: "smooth"
			});
		});

		next.addEventListener("click", () => {
			prev.disabled = false;
			// prev.removeAttribute("disabled");

			track.scrollTo({
				left: track.scrollLeft + track.firstElementChild.offsetWidth,
				behavior: "smooth"
			});
		});

		track.addEventListener("scroll", () => {
			const trackScrollWidth = track.scrollWidth;
			const trackOuterWidth = track.clientWidth;

			prev.disabled = false;
			next.disabled = false;
			// prev.removeAttribute("disabled");
			// next.removeAttribute("disabled");

			if (track.scrollLeft <= 0) prev.disabled = true; //prev.setAttribute("disabled", "");
			if (track.scrollLeft === trackScrollWidth - trackOuterWidth) next.disabled = true; //next.setAttribute("disabled", "");
		});

	};
});

Comments

[Rsa97]

if (sliders.length !== 0) {
Лишнее. Если массив пустой, то foreach и так не будет выполняться.

[Николай]

Rsa97, поправил))