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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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