通过拆分阵列循环并用包装纸输出

Question

我很难找出最好的方法。我从0到x字符串名称的数量，即：Zillow，Trulia。我想做的是将图像与这些字符串名称相关联，然后将它们显示到列表中。我试图做一个切换语句，但是不确定是否可以在1个以上工作...如果我错了，请纠正我。

因此，例如，变量列表持有两个项目(Zillow/trulia(，我如何检查多个值的Ky split函数变量，然后添加输出：$('#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

这是我从您的代码中写下我的理解的方式：

我想您想检查reviewSiteNames数组中是否有一些特定单词以确定如何包装#review-icon-list元素。

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

我希望这很有用，因为我不太确定目标是什么。