Выборка элементов querySelectorAll

[Nlk]

Скажите пожалуйста, почему при выборке элементов, данный вариант выдаёт ошибку?

[].forEach.call(pages, function(el, i, p) {
	if (p[0].contains("active")){
		alert("wow");
	}
});

[рони]

Nlk,
contains это что?

[Nlk]

рони,
Проверка на содержание класса.
Видимо это node узел и у не получиться проверить?

[Nexus]

Nlk, у вы забыли сначала обратиться к свойству "classList".

ps. зачем перебирать коллекцию, если проверяется всегда только первый эл-т?

[Nlk]

Nexus,
Блиин. Спасибо большое.

[Nlk]

Пожалуйста дайте совет, как лучше реализовать данную логику:

есть 4 элемента,
если элемент 1 содержит класса "active" - то элементу 3 и 4 назначается класс "hide",
если элемент 2 содержит класса "active" - то элементу 4 назначается класс "hide",
если элемент 3 содержит класса "active" - то элементу 1 назначается класс "hide",
если элемент 4 содержит класса "active" - то элементу 1 и 2 назначается класс "hide".
И соответственно в начале каждой проверки удалять все классы "hide".

Мой не рабочий вариант:

[].forEach.call(pages, function(el, i, p) {

i == pageIndex ? p[i].classList.add("active") : el.classList.remove("active");
			
if (p[0].classList.contains("active")) {
  el.classList.remove("hide");
  p[2].classList.toggle = "hide";
  p[3].classList.toggle = "hide";
} else if (p[1].classList.contains("active")) {
  el.classList.remove("hide");
  p[3].classList.toggle = "hide";
} else if (p[2].classList.contains("active")) {
  el.classList.remove("hide");
  p[0].classList.toggle = "hide";
} else if (p[3].classList.contains("active")) {
  el.classList.remove("hide");
  p[0].classList.toggle = "hide";
  p[1].classList.toggle = "hide";
} else {}

});

[Nexus]

Я думаю логика у вас неправильная, если все элементы изначально скрыто, то нет необходимости какие-то отдельные скрывать повторно.
Нужно наоборот найти активные и отобразить их.

[Dilettante_Pro]

<style>
.hide { display:none;}
div { display:inline-block;
        color:grey }
.current { color:black; }
</style>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script>
var pages = document.querySelectorAll('div');
[].forEach.call(pages, function(el, i, p) {
   p[i].onclick = function() {
        for(var j = 0; j < p.length; j++) { 
           p[j].classList.add("hide"); 
           p[j].classList.remove("current");
        }
        for(var j = i - 1 < 0?0:i-1; j < (i+2 <p.length?i+2:p.length);j++) {      
           p[j].classList.remove("hide");
        }
        p[i].classList.add("current");
   }
});
</script>

[Nlk]

Dilettante_Pro,
спасибо огромнейшее, буду разбирать ваш пример.
Nexus,
извиняюсь за отсутствие ясности в вопросе.

[Nlk]

Такой вот слайдер получился https://codecanyon.net/item/page-sli...lugin/22780197