文章/答案/技术大牛

发布

社区首页 >问答首页 >JavaScript循环变量范围

问JavaScript循环变量范围
EN

Stack Overflow用户

提问于 2019-10-25 11:55:08

回答 1查看 103关注 0票数 1

问题是for-循环的范围。每次点击箭头按钮，汽车的图片应该改变到所需的角度。但这种情况不会发生。因为for-循环中的变量i位于本地范围内。我试图用像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>

html

css

for-loop

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-10-25 14:29:22

在单击处理程序中，需要将所选颜色存储在单独的变量中，例如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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58558068

复制

相似问题

问JavaScript循环变量范围
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript循环变量范围EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript循环变量范围
EN