var images = document.querySelectorAll(".surfboard__images__img");
var movingline = document.querySelector(".surfboards__main__information__choice_line__current");
var choices = document.querySelectorAll(".surfboards__main__information__choice__p");
var slider = document.querySelector(".surfboards__main__information__text__slider");
var board = document.querySelectorAll(".board");
var sliderCounter = 0;
var sliderBack = document.querySelector(".surfboards__slider_arrows__back");
var sliderForward = document.querySelector(".surfboards__slider_arrows__forward");
var sliderContainer = document.querySelector(".surfboards__slide_container");
var boards = ["images/board.png","images/board.png","images/board.png","images/board.png","images/board.png","images/board.png","images/board.png","images/board.png"];
console.log(document.querySelector(".surfboard__images__current"));
sliderContainer.style.marginLeft = "0px";
sliderBack.onclick = function(){
sliderCounter--;
console.log("SMTH");
sliderContainer.style.marginLeft = parseInt(sliderContainer.style.marginLeft) + 1024 + "px";
}
sliderForward.onclick = function(){
sliderCounter++;
console.log("SMTH");
sliderContainer.style.marginLeft = parseInt(sliderContainer.style.marginLeft) - 1024 + "px";
}
images[0 + (sliderCounter * 3)].onclick = function(){
document.querySelector(".surfboard__images__current").classList.remove("surfboard__images__current");
images[0 + (sliderCounter * 3)].classList.add("surfboard__images__current");
console.log(images[0]);
board[sliderCounter].src = boards[0 + (sliderCounter * 3)];
}
images[1 + (sliderCounter * 3)].onclick = function(){
document.querySelector(".surfboard__images__current").classList.remove("surfboard__images__current");
images[1 + (sliderCounter * 3)].classList.add("surfboard__images__current");
console.log(images[1]);
board[sliderCounter].src = boards[1 + (sliderCounter * 3)];
}
images[2 + (sliderCounter * 3)].onclick = function(){
document.querySelector(".surfboard__images__current").classList.remove("surfboard__images__current");
images[2 + (sliderCounter * 3)].classList.add("surfboard__images__current");
console.log(images[2 + (sliderCounter * 3)]);
board[sliderCounter].src = boards[2 + (sliderCounter * 3)];
}
images[3 + (sliderCounter * 3)].onclick = function(){
document.querySelector(".surfboard__images__current").classList.remove("surfboard__images__current");
images[3 + (sliderCounter * 3)].classList.add("surfboard__images__current");
console.log(images[3 + (sliderCounter * 3)]);
board[sliderCounter].src = boards[3 + (sliderCounter * 3)];
}
choices[0 + (sliderCounter * 3)].onclick = function(){
movingline.style.marginLeft = "0px";
document.querySelectorAll(".surfboards__main__information__choice__current")[0].classList.remove("surfboards__main__information__choice__current");
this.classList.add("surfboards__main__information__choice__current");
slider.style.marginLeft = "0px";
}
choices[1 + (sliderCounter * 3)].onclick = function(){
movingline.style.marginLeft = "100px";
document.querySelectorAll(".surfboards__main__information__choice__current")[0].classList.remove("surfboards__main__information__choice__current");
this.classList.add("surfboards__main__information__choice__current");
slider.style.marginLeft = "-350px";
}
choices[2 + (sliderCounter * 3)].onclick = function(){
movingline.style.marginLeft = "183px";
document.querySelectorAll(".surfboards__main__information__choice__current")[0].classList.remove("surfboards__main__information__choice__current");
this.classList.add("surfboards__main__information__choice__current");
slider.style.marginLeft = "-700px";
}
1 ответ
Всем спасибо за предложенные советы в комментариях. Затупил сильно, да так, что не додумался использовать цикл, вот код:
for(var i=0; i< images.length; i++){
images[i].onclick = function(){
document.querySelector(".surfboard__images__current").classList.remove("surfboard__images__current");
this.classList.add("surfboard__images__current");
for(var i =0; i < images.length;; i++){
if(images[i] == this){
console.log(i);
board[sliderCounter].src = boards[i];
}
}
console.log(images[i]);
console.log(boards[i]);
console.log(i);
}
}
}
во-первых цикл использовать нельзя, т.к он будет выполняться только один раз,
- один раз для чего? ты навешиваешь событие клика на однотипные блоки... для этого разумно использовать цикл. Или ты думаешь, что один цикл дает один клик?