Проблема заключается в объеме цикла for. При каждом нажатии на кнопки со стрелками изображение автомобиля должно изменяться под нужным углом. Но этого не происходит. Поскольку переменная i в цикле for находится в локальной области видимости. Я пытаюсь решить эту проблему с помощью глобального объекта, такого как window, но это не сработало. (Пожалуйста, используйте увеличенный пример)

Заранее спасибо!

function myFunction() {
  const imageNumber = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
  const imageColor = ['pearl-white', 'ruby-black-pearl', 'alloy-silver-metallic', 'mercury-gray-metallic', 'red-diamond', 'quartz-brown-metallic'];
  const img = document.querySelector('#image');
  const colorButton = document.querySelectorAll('#color');
  const next = document.querySelector('#next');
  const prev = document.querySelector('#prev');
  let index = 0;

  img.setAttribute('src', 'https://mcarsstatic.cachefly.net/img/vehicles/phev/2020/trims/GT-S-AWC/360/' + imageColor[index] + '/2020-phev-360-' + imageNumber[index] + '-d.png');

  for (let i = 0; i < colorButton.length; i++) {
    colorButton[i].addEventListener('click', function() {
      img.setAttribute('src', 'https://mcarsstatic.cachefly.net/img/vehicles/phev/2020/trims/GT-S-AWC/360/' + imageColor[i] + '/2020-phev-360-' + imageNumber[index] + '-d.png');
    });
  }

  next.addEventListener('click', function() {
    index++;
    if (index >= imageNumber.length) {
      index = 0;
    }
    img.setAttribute('src', 'https://mcarsstatic.cachefly.net/img/vehicles/phev/2020/trims/GT-S-AWC/360/' + imageColor[i] + '/2020-phev-360-' + imageNumber[index] + '-d.png');
  });

  prev.addEventListener('click', function() {
    index--;
    if (index <= 0) {
      index = imageNumber.length - 1;
    }
    img.setAttribute('src', 'https://mcarsstatic.cachefly.net/img/vehicles/phev/2020/trims/GT-S-AWC/360/' + imageColor[i] + '/2020-phev-360-' + imageNumber[index] + '-d.png');
  });



}
myFunction();
html,
body {
  width: 100%;
  position: relative;
  font-size: 100%;
  font-weight: normal;
  font-family: 'Noto Sans', sans-serif;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid black;
}

div.img-item {
  position: relative;
}

div.img-item>img {
  position: absolute;
  top: 0;
  left: 0;
  background-color: white;
}

div.arrow-item {
  height: 462px;
}

span#next {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
}

span#prev {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
}

div.colors {
  display: flex;
  justify-content: center;
  padding: 15px;
  cursor: pointer;
}

#color {
  padding: 15px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="section">
  <div class="container">
    <div class="row">
      <div class="col-md-1 arrow-item">
        <span id="next"><</span>
      </div>
      <div class="col-md-10 img-item">
        <img id="image">

      </div>
      <div class="col-md-1 arrow-item">
        <span id="prev">></span>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4"></div>
      <div class="col-md-4">
        <div class="colors">
          <div id="color" style="background-color: white;"></div>
          <div id="color" style="background-color: black;"></div>
          <div id="color" style="background-color: silver;"></div>
          <div id="color" style="background-color: gray;"></div>
          <div id="color" style="background-color: red;"></div>
          <div id="color" style="background-color: brown;"></div>
        </div>
      </div>
      <div class="col-md-4"></div>
    </div>
  </div>


</section>
</body>

</html>
javascript html css for-loop
1
Rivera Time Club 25 Окт 2019 в 14:55
И, пожалуйста, задайте вопрос в соответствии с рекомендациями: stackoverflow.com/help/how-to-ask
 – 
Lone Lunatic
25 Окт 2019 в 15:02
Да, это из-за масштаба. И установка i в глобальную не помогает, потому что вы используете i вне цикла, и на этом этапе значение i будет отличаться от индексов imageColor множество.
 – 
Teemu
25 Окт 2019 в 15:08
При щелчке используйте imageColor[index] вместо imageColor[i]
 – 
Prawin soni
25 Окт 2019 в 15:08
Js-объекты помогают решить эту проблему или нет?
 – 
Rivera Time Club
25 Окт 2019 в 15:23

1 ответ

Лучший ответ

В обработчике кликов нужно сохранить выбранный цвет в отдельной переменной, например. selectedColor.

Кроме того, нельзя использовать одно и то же значение id более одного раза. Я не исправлял это, потому что это не было необходимо для работы фрагмента, но вам лучше позаботиться об этом, чтобы код не «загадочным образом» не работал в некоторых браузерах.

Фиксированный код:

function myFunction() {
  const imageNumber = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
  const imageColor = ['pearl-white', 'ruby-black-pearl', 'alloy-silver-metallic', 'mercury-gray-metallic', 'red-diamond', 'quartz-brown-metallic'];
  const img = document.querySelector('#image');
  const colorButton = document.querySelectorAll('#color');
  const next = document.querySelector('#next');
  const prev = document.querySelector('#prev');
  let index = 0;
  let selectedColor = 0;

  img.setAttribute('src', 'https://mcarsstatic.cachefly.net/img/vehicles/phev/2020/trims/GT-S-AWC/360/' + imageColor[selectedColor] + '/2020-phev-360-' + imageNumber[index] + '-d.png');

  for (let i = 0; i < colorButton.length; i++) {
    colorButton[i].addEventListener('click', function() {
      selectedColor = i;
      img.setAttribute('src', 'https://mcarsstatic.cachefly.net/img/vehicles/phev/2020/trims/GT-S-AWC/360/' + imageColor[selectedColor] + '/2020-phev-360-' + imageNumber[index] + '-d.png');
    });
  }

  next.addEventListener('click', function() {
    index++;
    if (index >= imageNumber.length) {
      index = 0;
    }
    img.setAttribute('src', 'https://mcarsstatic.cachefly.net/img/vehicles/phev/2020/trims/GT-S-AWC/360/' + imageColor[selectedColor] + '/2020-phev-360-' + imageNumber[index] + '-d.png');
  });

  prev.addEventListener('click', function() {
    index--;
    if (index <= 0) {
      index = imageNumber.length - 1;
    }
    img.setAttribute('src', 'https://mcarsstatic.cachefly.net/img/vehicles/phev/2020/trims/GT-S-AWC/360/' + imageColor[selectedColor] + '/2020-phev-360-' + imageNumber[index] + '-d.png');
  });
}

myFunction();
html,
body {
  width: 100%;
  position: relative;
  font-size: 100%;
  font-weight: normal;
  font-family: 'Noto Sans', sans-serif;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid black;
}

div.img-item {
  position: relative;
}

div.img-item>img {
  position: absolute;
  top: 0;
  left: 0;
  background-color: white;
}

div.arrow-item {
  height: 462px;
}

span#next {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
}

span#prev {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
}

div.colors {
  display: flex;
  justify-content: center;
  padding: 15px;
  cursor: pointer;
}

#color {
  padding: 15px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="section">
  <div class="container">
    <div class="row">
      <div class="col-md-1 arrow-item">
        <span id="next"><</span>
      </div>
      <div class="col-md-10 img-item">
        <img id="image">
      </div>
      <div class="col-md-1 arrow-item">
        <span id="prev">></span>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4"></div>
      <div class="col-md-4">
        <div class="colors">
          <div id="color" style="background-color: white;"></div>
          <div id="color" style="background-color: black;"></div>
          <div id="color" style="background-color: silver;"></div>
          <div id="color" style="background-color: gray;"></div>
          <div id="color" style="background-color: red;"></div>
          <div id="color" style="background-color: brown;"></div>
        </div>
      </div>
      <div class="col-md-4"></div>
    </div>
  </div>
0
Peter B 25 Окт 2019 в 17:29
Большое спасибо, Питер Б. Это действительно помогает мне.
 – 
Rivera Time Club
25 Окт 2019 в 19:25

Похожие вопросы

29 Как удалить свойство из объекта JavaScript?
30 Какой оператор равенства (== vs ===) следует использовать в сравнениях JavaScript?
27 Как пройти через цикл или перечислить объект JavaScript?
29 Как включить файл JavaScript в другой файл JavaScript?
22 Что делает «use strict» в JavaScript и что за этим стоит?
33 Перебрать массив в JavaScript
24 Для каждого над массивом в JavaScript
💵 Получи $100 на хостинг на 60 дней.
Регистрируйся!

Новые вопросы

2 Ошибка при реализации сортировки выбором в JavaScript.
1 Как сделать так, чтобы шаблон html в таблице имел первый столбец, делящийся на 4 ячейки, а второй столбец - только на одну ячейку?
2 В JavaScript есть способ сделать переменные глобальными, как это можно сделать в Python.
1 Возвращаемое значение функции не отображается в атрибуте заполнителя.
1 Пересеките два массива json и объедините все поля без явного именования полей для объединения.
1 Я хочу вызвать и изменить элемент, который хочу выбрать в тех же классах.
1 Маршрут Svelte 4 не найден после обновления страницы в рабочем режиме
1 Как настроить таргетинг на эту кнопку в условии if в ванильном JavaScript
1 Изменение содержимого div не обновляется в DOM
1 NPM – невозможно разрешить дерево зависимостей
Все вопросы по теме javascript >

javascript

По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Обратите внимание, что JavaScript — это НЕ Java. Включите все теги, относящиеся к вашему вопросу: например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [стройный] и т. д.

Подробнее про javascript...