Masalahnya adalah ruang lingkup for-loop. Setiap klik pada tombol panah, gambar mobil harus berubah ke sudut yang diinginkan. Tapi ini tidak terjadi. Karena variabel i di for-loop berada dalam lingkup lokal. Saya mencoba menyelesaikan masalah ini dengan objek global seperti window, tetapi ini tidak berhasil. (Silakan gunakan contoh yang dimaksimalkan)

Terima kasih sebelumnya!

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>
1
Rivera Time Club 25 Oktober 2019, 14:55

1 menjawab

Jawaban Terbaik

Di penangan klik, Anda perlu menyimpan warna yang dipilih dalam variabel terpisah, mis. selectedColor.

Selain itu, tidak diperbolehkan menggunakan nilai id yang sama lebih dari satu kali. Saya tidak memperbaiki ini karena cuplikan tidak diperlukan untuk berfungsi, tetapi itu adalah sesuatu yang lebih baik Anda jaga untuk mencegah kode 'secara misterius' tidak berfungsi di beberapa browser.

Kode tetap:

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 Oktober 2019, 14:29