Verwenden eines Schalters innerhalb einer Funktion

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

    } 

Dies ist mein Skript. Was ich will, ist, wenn ich eine Taste drücke, fügt es 1 hinzu oder nimmt 1 aus dem slideIndex, und abhängig davon, auf welchem ​​Folienindex es momentan ist, möchte ich den Schalter verwenden und dann das Hintergrundbild der Klasse einstellen "Banner" zu dem Bild, das der Nummer entspricht. Dies scheint jedoch nicht zu funktionieren. Was ist daran falsch?

Answer 1

Der Grund, warum es nicht funktioniert, ist, weil n eine Zahl ist, aber Ihre Schalter Fälle sind Strings. Entfernen Sie einfach die Anführungszeichen um Ihre Fälle.

function showDivs(n){ 
    // ... 

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

Da Ihr Bild Namen auf den Wert von n entsprechen, eine weitere Verbesserung, die Sie machen können, ist n zu verwenden, sondern direkt durch die switch gehen:

function showDivs(n){ 

    // ... 

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

Hinweis: Sie haben zwei JPEG Bilder mit verschiedenen Erweiterungen könnten Sie in eine konsistente Erweiterung umbenennen, um Ihren Anwendungsfall zu vereinfachen. Andernfalls sollten Sie sich an die switch-Anweisung halten.

---

Wie CoderGLM in den Kommentaren erwähnt, document.getElementsByClassName("banner") eine Knotenliste aller Elemente mit der Klasse banner zurückzukehren. Das heißt, Sie müssen ein bestimmtes Element extrahieren, wahrscheinlich die erste:

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

Answer 2

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

x ist ein Array von Elementen mit der Klasse ‚Banner‘. Sie sollten stattdessen id verwenden (document.getElementById()), aber wenn Sie sicherstellen können, dass es nur ein Element mit der Klasse "Banner" gibt, dann greifen Sie einfach das 0. Element.

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

---

Eine bessere Lösung

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]}')`; 
};