Switch-Anweisung nicht Parameter

Question

Ich habe ein Problem mit einer switch-Anweisung. Ich habe hier ein wenig vereinfacht, aber mein Projekt ist eine Galerie von Bildern und wenn Sie auf ein Bild klicken, wird das Bild geladen. Die Basis HTML ist einfach:

html:

<section id="content">  
    <div id="container">  
     <img src="Images/Image1.jpg" id="#image" class="bigImage" /> 
     <div id="info">Title1</div> 
    </div> <!-- end of container -->  
</section> <!-- end of content --> 

die html für die Galerie:

<section id="content"> 
<div id="container"> 
    <div id="gallery" class="sections"> 
    <img src="Images/Image1.jpg" class="thumbnails"> 
    <img src="Images/Image2.jpg" class="thumbnails"> 
    <img src="Images/Image3.jpg" class="thumbnails"> 
    etc... 
    </div> 
</div> <!-- end of content --> 
</section> <!-- end of container --> 

Die Funktion, dies zu tun:

$(document).on('click', '.thumnails', function(e){   
    var imageSource = $(this).attr('src'); 
    $('#container').remove();  
    $('#content').load('index.html' + ' #content', function(){  
     $('#image').attr('src', imageSource); 
    }).hide().fadeIn('slow'); 

}); 

Das alles funktioniert gut. Jetzt möchte ich den Inhalt des #info-Divs aktualisieren, das den Titel jedes Bildes hat. Dazu erstelle ich eine einfache Funktion, die die Switch-Anweisung enthält:

function updateInfo(number){ 
     switch(number) { 
     case 1: 
      $('#info').text('Title1'); 
      break; 
     case 2: 
      $('#info').text('Title2'); 
      break; 
     case 3: 
      $('#info').text('Title3'); 
      break; 
     etc... 
     } 
    } 

ich dann meine ursprüngliche Ereignis-Listener aktualisieren, indem Sie einen Aufruf dieser Funktion das Hinzufügen wie so:

$(document).on('click', '.thumbnails', function(e){ 
    var imageSource = $(this).attr('src'); 
    $('#container').remove();  
    $('#content').load('index.html' + ' #content', function(){  
     $('#image').attr('src', imageSource);  
     counter = imageSource.match(/\d+/g); 
     updateInfo(counter);  
    }).hide().fadeIn('slow');  
}); 

Und das funktioniert nicht. Das Bild wird aktualisiert, aber der Titel nicht und es wird immer angezeigt: Titel1.

Ich habe ein wenig getestet, um zu sehen, warum. Ich habe eine Warnung() Anweisung innerhalb der aktualisiereInfo Funktion wie so setzen:

function updateInfo(number){ 
    alert(number);  
    switch(number) { 
     case 1: 
      $('#info').text('Title1'); 
      break; 
     case 2: 
      $('#info').text('Title2'); 
      break; 
     case 3: 
      $('#info').text('Title3'); 
      break; 
     etc... 
    } 
} 

Und das funktioniert, was bedeutet, dass, wenn ich auf ein Bild klicken, bevor das Bild zeigt ich eine Warnung mit der Anzahl der zu bekommen Bild Ich klicke, also weiß ich, dass die Funktion aufgerufen wird und der Parameter übergeben wird. Aber wenn ich den Alarm verschiebe (Nummer); Aussage innerhalb einer der Fallklauseln, wie folgt:

function updateInfo(number){  
    switch(number) { 
     case 1: 
      $('#info').text('Title1'); 
      break; 
     case 2: 
      alert(number); 
      break; 
     case 3: 
      $('#info').text('Title3'); 
      break; 
     etc... 
    } 
} 

Ich bekomme keine Alarmbox. Ich bin noch ziemlich neu im Programmieren, das könnte ein grundlegender Fehler sein. Vielen Dank für Ihre Zeit.

Answer 1

match gibt ein Array zurück.

Ihren Code ändern:

updateInfo(counter[0]);

Außerdem wird die Variable als String kommen, so dass Sie Ihren Fall Variablen in Anführungszeichen wickeln müssen, zB: case '1':

function updateInfo(number) { 
 
    switch (number) { 
 
    case "1": 
 
     console.log(1); 
 
     break; 
 
    case "2": 
 
     console.log(2); 
 
     break; 
 
    case "3": 
 
     console.log(3); 
 
     break; 
 
    default: 
 
     console.log('Unrecogised number: ' + number); 
 
     break; 
 
    } 
 
} 
 
var counter = 'Images/Image2.jpg'.match(/\d+/g); 
 
updateInfo(counter[0]); //2

Answer 2

Um Konflikte zu vermeiden, da die Variable numbe r wäre eine Zeichenfolge. Ändern Sie den Code, indem Sie die Groß- und Kleinschreibung in Anführungszeichen einschließen, wie unten gezeigt.

function updateInfo(number){ 
    switch(number) { 
    case '1': 
     $('#info').text('Title1'); 
     break; 
    case '2': 
     $('#info').text('Title2'); 
     break; 
    case '3': 
     $('#info').text('Title3'); 
     break; 
    etc... 
    } 
}