スプリットアレイをループしてwrapInnerを使用して出力する

Question

以下を実行する最善の方法を理解するのが難しいです。私はどこからでも0からxまでの文字列名を取得しています。すなわち、Zillow、Truliaです。私がしたいことは、イメージをそれらの文字列名に関連付けて、リストに表示することです。私はswitch文を実行しようとしていますが、1つ以上の条件で動作するかどうかはわかりません...間違っていれば私を修正してください。

だから、例えば、変数リストは、私は複数の値のためのKY split関数の変数を確認することができますどのように、二つのアイテム（Zillowの/ Truliaの）を保持してから出力を追加します$('#review-icon-list').wrapInner('<li class="review-icon">' + zillowImg + '</li>');

今の私のスイッチケースを投げています予期しないトークンエラーですが、とにかく正しい方法を使用しているとは思いません。私はこれをどうやってやるのか誰にも分かりますか？私はループのいくつかの並べ替えをしている場合とそうなら、私はそれをどのように構造化するのだろうか？

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

これを試す新しい方法。表示されている唯一の画像は、each関数の最後のif文です。

$.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

は私はあなたのコードから理解する何を書くでしょうかです。

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

私は目標が本当に何であるかはかなりわからないんだけど、これは便利です願っています。私はあなたには、いくつかの特定の単語が#review-icon-list要素をラップする方法を決定するreviewSiteNames配列であるかどうかを確認したいと思います

：ここ