자바 스크립트 루프 변수 범위

debugcn 에 게시 Dev

리베라 타임 클럽

문제는 for 루프의 범위입니다. 화살표 버튼을 클릭 할 때마다 자동차 사진이 원하는 각도로 변경되어야합니다. 그러나 이것은 일어나지 않습니다. ifor 루프 의 변수 가 로컬 범위에 있기 때문 입니다. 나는 같은 전역 객체 로이 문제를 해결하려고 노력 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>

피터 B

클릭 핸들러에서 선택한 색상을 별도의 변수 (예 :)에 저장해야합니다 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>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-1

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

자바 스크립트 루프 변수 범위

자바 스크립트 루프 변수 범위

자바 스크립트 범위 : forEach 루프 외부가 아닌 내부에서 선언 된 변수

범위 사이의 if 루프를위한 자바 스크립트

자바 스크립트 범위 변경

자바 스크립트 : 재귀 + for 루프 + 범위

자바 스크립트 함수 콜백 변수 범위

자바 스크립트 함수 범위 및 매개 변수

자바 스크립트 변수 범위가 혼란스러워

MVC에서 자바 스크립트의 변수 범위

자바 스크립트의 동적 onclick 변수 범위

자바 스크립트 전달 변수 및 범위

자바 스크립트 변수 범위 동작

콜백의 자바 스크립트 변수 범위?

자바 스크립트의 변수 범위

여러 호출의 자바 스크립트 변수 범위

자바 스크립트에서 변수 i의 범위

자바 스크립트 변수 및 범위

자바 스크립트 변수 선언 범위

자바 스크립트의 중첩 변수 범위

if / else 루프의 자바 스크립트 변수 선언

루프 자바 스크립트의 동적 변수

루프의 자바 스크립트 변수 이름

for 루프 자바 스크립트에서 변수 생성

foreach 루프의 자바 스크립트 변수

자바 스크립트 루프-변수 이름 만들기

자바 스크립트에서 루프없이 범위 합계 만들기

자바 스크립트의 for 루프 함수 내부의 for 루프

자바 스크립트 자체 실행 함수 및 변수 범위

변수 범위 및 자바 스크립트 실행 컨텍스트

JSON 구문 분석을위한 자바 스크립트 변수 범위