Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Выборка элементов querySelectorAll (https://javascript.ru/forum/events/71107-vyborka-ehlementov-queryselectorall.html)

Nlk 24.01.2018 15:54

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

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

рони 24.01.2018 16:11

Nlk,
contains это что?

Nlk 24.01.2018 16:45

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

Nexus 24.01.2018 16:52

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

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

Nlk 24.01.2018 16:57

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

Nlk 26.01.2018 13:12

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

есть 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 26.01.2018 13:30

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

Dilettante_Pro 26.01.2018 13:56

<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 26.01.2018 15:14

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

Nlk 07.03.2018 10:20

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


Часовой пояс GMT +3, время: 06:53.