Скажите пожалуйста, почему при выборке элементов, данный вариант выдаёт ошибку?
[].forEach.call(pages, function(el, i, p) {
if (p[0].contains("active")){
alert("wow");
}
});
|
Nlk,
contains это что? |
рони,
Проверка на содержание класса. Видимо это node узел и у не получиться проверить? |
Nlk, у вы забыли сначала обратиться к свойству "classList".
ps. зачем перебирать коллекцию, если проверяется всегда только первый эл-т? |
Nexus,
Блиин. Спасибо большое. |
Пожалуйста дайте совет, как лучше реализовать данную логику:
есть 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 {}
});
|
Я думаю логика у вас неправильная, если все элементы изначально скрыто, то нет необходимости какие-то отдельные скрывать повторно.
Нужно наоборот найти активные и отобразить их. |
<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>
|
Dilettante_Pro,
спасибо огромнейшее, буду разбирать ваш пример. Nexus, извиняюсь за отсутствие ясности в вопросе. |
Такой вот слайдер получился https://codecanyon.net/item/page-sli...lugin/22780197
|
Nlk,
:victory: |
| Часовой пояс GMT +3, время: 01:12. |