함수 내에서 스위치 사용하기

Question

var slideIndex = 1; 
showDivs(slideIndex); 

function plusDivs(n) { 
    showDivs(slideIndex += n); 
} 

function showDivs(n){ 
    var i; 
    var x = document.getElementsByClassName("banner").style; 
    if (n > 4) {slideIndex = 1} 
    if (n < 1) {slideIndex = 4} 

    switch (n) { 
     case '1': x.backgroundImage = "url('1.jpg')"; 
      break; 
     case '2': x.backgroundImage = "url('2.png')"; 
      break; 
     case '3': x.backgroundImage = "url('3.jpeg')"; 
      break; 
     case '4': x.backgroundImage = "url('4.png')"; 
      break; 
    } 

    } 

이것은 내 스크립트입니다. 내가 원하는 것은 버튼을 누르면 슬라이드 인덱스에서 1을 빼거나 1을 빼고 현재 어떤 슬라이드 인덱스에 따라 스위치를 사용하고 클래스의 배경 이미지를 설정하려고하는지에 따라 달라집니다. 그 번호에 해당하는 이미지에 "배너". 그러나 이것은 작동하지 않습니다. 그게 뭐가 잘못 되었 니?

Answer 1

이유는 작동하지 않는 이유는 n이 숫자이지만 스위치 케이스가 문자열이기 때문입니다. 케이스 주변의 따옴표를 지우십시오. 이미지 이름부터

function showDivs(n){ 
    // ... 

    switch (n) { 
     case 1: // ... 
     case 2: // ... 
     case 3: // ... 
     case 4: // ... 
    } 
} 

이 n의 값에 해당하는, 당신이 할 수있는 또 다른 개선 대신 switch 거치지 직접 n을 사용하는 것입니다

function showDivs(n){ 

    // ... 

    var extension = n % 2 === 0 ? '.jpg' : '.png'; 
    x.backgroundImage = "url('" + n + extension +"')"; 
} 

주 : 두 JPEG를 다른 확장자를 가진 이미지를 사용하는 경우 일관된 확장자로 이름을 바꾸어 사용 사례를 단순화하는 것이 좋습니다. 그렇지 않으면 switch 문을 계속 사용하는 것이 좋습니다.

코멘트에 CoderGLM에서 언급 한 바와 같이

---

, document.getElementsByClassName("banner") 클래스 banner 모든 요소의 노드 목록을 반환합니다. 이것은 당신이 특정 요소를 추출하기 위해 아마도 첫 번째 필요 의미

x = document.getElementsByClassName("banner")[0].style; 

Answer 2

var x = document.getElementsByClassName("banner").style; 

x 클래스 '배너'와 요소의 배열입니다. 대신 id (document.getElementById())를 사용해야합니다. 그러나 'banner'클래스가있는 요소가 하나만 있는지 확인하려면 0 번째 요소 만 잡으십시오.

var x = document.getElementsByClassName("banner")[0].style; 

---

가 더 나은 솔루션이

let slideIndex = 1; 

const plusDivs = (n) => { 
    slideIndex += n; 
    showDivs(slideIndex); 
}; 

const showDivs = (n) => { 
    let x = document.getElementsByClassName('banner')[0].style; 

    slideIndex = Math.min(4, Math.max(1, n)); // Clamp n between [1,4] 

    const images = ['1.jpg', '2.png', '3.jpeg', '4.png']; 
    x.backgroundImage = `url('${images[n]}')`; 
};