#javascript
#javascript
Вопрос:
Пожалуйста, не могли бы вы помочь мне назначить класс .active точкам слайдера, которые генерируются JS, они не являются частью HTML. Когда слайд 1 активен, мне нужна точка 1, чтобы иметь class .active, но не повезло.. все решения, которые я нашел, предназначены для точек, жестко закодированных в HTML.
Мой HTML:
<div class="w3-content w3-display-container">
<div class="w3-display-container mySlides">
<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
<h3>Slide 1</h3>
<p>1. Lorem Ipsum.</p>
</div>
</div>
<div class="w3-display-container mySlides">
<div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
<h3>Slide 2</h3>
<p>2.Lorem Ipsum.</p>
</div>
</div>
<div class="w3-display-container mySlides">
<div class="w3-display-topleft w3-large w3-container w3-padding-16 w3-black">
<h3>Slide 3</h3>
<p>3. Lorem Ipsum.</p>
</div>
</div>
<button class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)">amp;#10094;</button>
<div id="js-slider-dots"></div>
<button class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">amp;#10095;</button>
</div>
Мой JS (который переключает слайды и генерирует точки):
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex = n);
}
function goToDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i ) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
function generateDots() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i ) {
var dotNumber = i 1;
var dot = document.createElement('span');
dot.innerHTML =
'<button class="js-dot" onclick="goToDiv(' dotNumber ')">' dotNumber '</button>';
document.getElementById('js-slider-dots').appendChild(dot);
}
}
generateDots();
Все это также доступно в JS Bin: https://jsbin.com/ketohatane/edit?html ,js, вывод
Ответ №1:
Вы можете легко сделать это с помощью .classList.add()
и .remove()
.
Просто выберите точки и активируйте точку, которая принадлежит активному слайду в showDivs
:
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
//get the list of dots
var y = document.getElementById("js-slider-dots").children;
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i ) {
x[i].style.display = "none";
//remove .active from all dots
y[i].classList.remove("active")
}
x[slideIndex - 1].style.display = "block";
//add .active to the selected dot
y[slideIndex - 1].classList.add("active")
}
Смотрите этот фрагмент:
var slideIndex = 1;
function plusDivs(n) {
showDivs(slideIndex = n);
}
function goToDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
//get the list of dots
var y = document.getElementById("js-slider-dots").children;
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i ) {
x[i].style.display = "none";
//remove .active from all dots
y[i].classList.remove("active")
}
x[slideIndex - 1].style.display = "block";
//add .active to the selected dot
y[slideIndex - 1].classList.add("active")
}
function generateDots() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i ) {
var dotNumber = i 1;
var dot = document.createElement('span');
dot.innerHTML =
'<button class="js-dot" onclick="goToDiv(' dotNumber ')">' dotNumber '</button>';
document.getElementById('js-slider-dots').appendChild(dot);
}
}
generateDots();
//placed AFTER generateDots()
showDivs(slideIndex);
/* Just for illustration */
.active{outline:solid 1px red;}
<div class="w3-content w3-display-container">
<div class="w3-display-container mySlides">
<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
<h3>Slide 1</h3>
<p>1. Lorem Ipsum.</p>
</div>
</div>
<div class="w3-display-container mySlides">
<div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
<h3>Slide 2</h3>
<p>2.Lorem Ipsum.</p>
</div>
</div>
<div class="w3-display-container mySlides">
<div class="w3-display-topleft w3-large w3-container w3-padding-16 w3-black">
<h3>Slide 3</h3>
<p>3. Lorem Ipsum.</p>
</div>
</div>
<button class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)">amp;#10094;</button>
<div id="js-slider-dots"></div>
<button class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">amp;#10095;</button>
</div>
Комментарии:
1. Привет, FZs, спасибо за совет. Мне не повезло заставить его работать. Консоль продолжает показывать мне ошибку «Не удается прочитать свойство ‘classList’ неопределенного значения в showDivs»
2. @VlastaPo Да. Это было потому, что вы звонили
showDivs
раньшеgenerateDots
. Я исправил свой ответ, взгляните на него!
Ответ №2:
Если вы получаете доступ к DOM из своей goToDiv
функции, вы можете быть уверены, что получаете доступ к DOM после того, как он был обновлен вашими class="js-dot"
элементами.
Что-то подобное даст вам желаемую функциональность.
function goToDiv(n) {
showDivs(slideIndex = n);
var dots = document.getElementsByClassName('js-dot');
for(var i = 0; i < dots.length; i ) {
if (i == n - 1) {
dots[i].classList.add('active');
} else {
dots[i].classList.remove('active');
}
}
}
Вот он в действии:
https://jsbin.com/tekukebeye/1/edit?html ,js, вывод
Комментарии:
1. Привет, Роуэн, спасибо, к сожалению, это работает только тогда, когда я нажимаю на точки, но не тогда, когда я использую стрелки. Итак, я переместил код в функцию showDivs(), и теперь он также переключает классы для стрелок, но в начале / конце есть проблема, она пропустит последнее / первое число и не добавит класс. Я обновил JS Bin — jsbin.com/ketohatane/edit?html , css, js, консоль, вывод любой идеи, пожалуйста?