関数内のスイッチを使用する

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; 
    } 

    } 

これは私のスクリプトです。 ボタンを押したときに、slideIndexに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 +"')"; 
} 

は注意：あなたは2 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'を持つ要素が1つしかないことが確認できる場合は、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]}')`; 
};