#javascript
#javascript
Вопрос:
Я пытаюсь создать в javascript набор кнопок, которые заставляют ползунок менять местами изображения в зависимости от того, какую кнопку я нажимаю.
Я придумал этот уродливый избыточный код:
var changer1 = document.getElementById("changer1");
var changer2 = document.getElementById("changer2");
var changer3 = document.getElementById("changer3");
var r = document.getElementsByClassName('carousel-item');
changer1.addEventListener('click', function() {
for (let i = 0; i < r.length; i ) {
r[i].classList.remove('active')
}
r[0].classList.add('active')
});
changer2.addEventListener('click', function() {
for (let i = 0; i < r.length; i ) {
r[i].classList.remove('active')
}
r[1].classList.add('active')
});
changer3.addEventListener('click', function() {
for (let i = 0; i < r.length; i ) {
r[i].classList.remove('active')
}
r[2].classList.add('active')
});
И это сработало, но я знаю, что избыточный код можно оптимизировать, поэтому я попробовал это:
var changersArray = document.getElementsByClassName('changers');
for (let i = 0; i < 3; i ) {
changer[i].addEventListener('click', function() {
for (let i = 0; i < r.length; i ) {
r[i].classList.remove('active')
}
r[0].classList.add('active')
});
}
Это HTML:
<section class="container-fluid sectionFive">
<div class="row title_image">
<div class="col-sm-12">
<h1 class="wow flipInY delay-1s slow">Testimonials</h1>
</div>
</div>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8 fetchDiv">
<div id="carouselExampleControls" class="carousel slide wow
fadeIn" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="mt-2 rounded-circle people" src="images/person_3.jpg" alt="">
<p class="frase"></p>
<p class="author"></p>
</div>
<div class="carousel-item">
<img class="mt-2 rounded-circle people" src="images/person_2.jpg" alt="">
<p class="frase"></p>
<p class="author"></p>
</div>
<div class="carousel-item">
<img class="mt-2 rounded-circle people" src="images/person_1.jpg" alt="">
<p class="frase"></p>
<p class="author"></p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-sm-2">
</div>
</div>
<div class="row changersRow">
<button class="changers" id="changer1">1</button><button class="changers" id="changer2">2</button><button class="changers" id="changer3">3</button>
</div>
</section>
Я пытался динамически создавать changer1, changer2 и changer3 с помощью записи changer [i] внутри цикла, но не сработало.
Пожалуйста, можете ли вы помочь мне выяснить, почему это не работает, и как я могу заставить это работать?
Спасибо.
Комментарии:
1. Пожалуйста, поделитесь также HTML. Почему во внутреннем цикле for то же самое
i
, что и во внешнем цикле for?2. Я поделился HTML, пожалуйста, взгляните на него, и да, я не видел, что я использовал один и тот же индекс для внешнего и внутреннего циклов.
Ответ №1:
Первые два улучшения, которые приходят мне в голову:
for (let i = 0; i < 3; i ) {
changer[i].addEventListener('click', function() {
for (let j = 0; j < r.length; j ) {
r[j].classList.remove('active')
}
r[i].classList.add('active')
});
}
Обратите внимание на внутреннюю i
замену и r[0]
изменение, чтобы использовать фактический индекс