Looping durch ein Split-Array und Ausgabe mit WrapInner

Question

Ich habe Schwierigkeiten herauszufinden, die beste Methode, um Folgendes zu tun. Ich bekomme irgendwo von 0 bis x Anzahl der Stringnamen, zB: Zillow, Trulia. Ich möchte ein Bild mit diesen String-Namen verknüpfen und sie dann in einer Liste anzeigen. Ich versuche, eine switch-Anweisung zu machen, bin mir aber nicht sicher, ob das für mehr als eine Bedingung funktioniert ... bitte korrigieren Sie mich, wenn ich falsch liege.

So zum Beispiel die Variablenliste hält zwei Elemente (Zillow/Trulia), wie kann ich ky split Funktion Variable für mehrere Werte überprüfen und dann den Ausgang hinzufügen: $('#review-icon-list').wrapInner('<li class="review-icon">' + zillowImg + '</li>');

Gerade jetzt meine Schaltergehäuse werfen wird ein unerwarteter Token-Fehler, aber ich glaube nicht, dass ich die richtige Methode benutze. Weiß jemand wie ich das machen würde? Würde ich eine Art Schleife machen und wenn ja, wie würde ich es strukturieren?

var reviewSiteNames = 'Zillow,Trulia'; 
    reviewSiteNames = reviewSiteNames.split(','); 
    console.log(reviewSiteNames); 
    var zillowImg = '<img src="https://s3.amazonaws.com/retain-static/www/zillow.jpg" alt="Zillow">'; 
    var truliaImg = '<img src="https://s3.amazonaws.com/retain-static/www/trulia.png" alt="Trulia">'; 

    if (reviewSiteNames == '') { 
     $('#no-current-reviewSites').html('No review sites currently added') 
    } 
    /*else if (reviewSiteNames) { 
     $('#review-icon-list').wrapInner('<li class="review-icon"></li>'); 
    }*/ 
    switch (true) { 
     case (reviewSiteNames.indexOf('Zillow') >= 0): 
      $('#review-icon-list').wrapInner('<li class="review-icon">' + zillowImg + '</li>'); 
      break; 
     case (reviewSiteNames.indexOf('Realtor.com') >= 0): 
      $('#review-icon-list').wrapInner('<li class="review-icon">' + realtorDotComImg + '</li>');   
      break;   
     case (reviewSiteNames.indexOf('Trulia') >= 0): 
      $('#review-icon-list').wrapInner('<li class="review-icon">' + truliaImg + '</li>'); 
     default: return ''; 
    }​; 

Neue Methode, dies zu versuchen. Das einzige Bild, das angezeigt wird, ist die letzte if-Anweisung in der each-Funktion.

$.each(reviewSiteNames, function (index, value) { 
     if (reviewSiteNames.includes('Zillow')) { 
      $('#review-icon-current').wrapInner('<li class="review-icon">' + zillowImg + '</li>'); 
     } 
     if (reviewSiteNames.includes('Trulia')) { 
      $('#review-icon-current').wrapInner('<li class="review-icon">' + truliaImg + '</li>'); 
     } 
     //return (value !== 'three'); 
    }); 

Answer 1

Hier ist, wie ich schreiben würde, was ich aus dem Code zu verstehen:

Ich glaube, Sie, wenn einige bestimmte Wort in der reviewSiteNames Array überprüfen möchten, um zu bestimmen, wie das #review-icon-list Element zu wickeln.

// Site names as a string 
var reviewSiteNames = 'Zillow,Trulia'; 

// Site names as an array 
reviewSiteNames = reviewSiteNames.split(','); 
//console.log(reviewSiteNames); 

// Some images used in li wrappers... 
var zillowImg = '<img src="https://s3.amazonaws.com/retain-static/www/zillow.jpg" alt="Zillow">'; 
var truliaImg = '<img src="https://s3.amazonaws.com/retain-static/www/trulia.png" alt="Trulia">'; 

// If the array is empty 
if (reviewSiteNames.length == 0) { 
    $('#no-current-reviewSites').html('No review sites currently added') 
} 

var myHTMLtoInsert = ""; 

// Check if specific values are in array 
if($.inArray('Zillow', reviewSiteNames)){ 
    myHTMLtoInsert += '<li class="review-icon">' + zillowImg + '</li>'; 

} 
if($.inArray('Realtor.com', reviewSiteNames)){ 
    myHTMLtoInsert += '<li class="review-icon">' + realtorDotComImg + '</li>'; 
} 
if($.inArray('Trulia',, reviewSiteNames)){ 
    myHTMLtoInsert += '<li class="review-icon">' + truliaImg + '</li>'; 
} 


$('#review-icon-list').html(myHTMLtoInsert); 

Answer 2

// The names: 
var names = 'Zillow,Trulia'; 
names = names.split(','); 

// The images mapper: an object that has names as keys and images as values 
var images = { 
    "Zillow": '<img src="https://s3.amazonaws.com/retain-static/www/zillow.jpg" alt="Zillow">', 
    "Trulia": '<img src="https://s3.amazonaws.com/retain-static/www/trulia.png" alt="Trulia">' 
}; 

// if names is empty: (names == '' won't work because names is no longer a string, it's an array now) 
if (names.length === 0) { 
    $('#no-current-reviewSites').html('No review sites currently added') 
} 
// if there is names 
else { 
    // loop through all names 
    names.forEach(function(name) { 
     // if this name got an image in the images mapper (images[name] !== undefined) 
     if(images[name]) { 
      // then do magic stuff with it 
      $('#review-icon-list').wrapInner('<li class="review-icon">' + images[name] + '</li>'); 
     } 
    }); 
} 

Ich hoffe, das nützlich ist, wie ich bin nicht ganz sicher, was das Ziel wirklich ist.