0
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";
}
7
  • 1
    знаешь что такое циклы? 19 июл 2017 в 6:05
  • Для начала отладьте код, чтобы он работал как было задумано (сейчас sliderCounter бесполезен). Посмотрите, что можно вынести в стили, чтобы не использовать "магические" оффсеты в скрипте.
    – Lyth
    19 июл 2017 в 6:20
  • во-первых цикл использовать нельзя, т.к он будет выполняться только один раз, да знаю, что slider counter бесполезен, поторопился. Пока хотелось бы узнать как это дело можно сократить, пробовал setInterval(), не сработало 19 июл 2017 в 6:30
  • во-первых цикл использовать нельзя, т.к он будет выполняться только один раз, - один раз для чего? ты навешиваешь событие клика на однотипные блоки... для этого разумно использовать цикл. Или ты думаешь, что один цикл дает один клик? 19 июл 2017 в 6:35
  • Цикл выполняется один раз при загрузке страницы, если хотите более подробно разъяснить мысль напишите отдельно код. 19 июл 2017 в 6:59

1 ответ 1

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);
        }
    }
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.