循环通过拆分数组并使用 wrapInner 输出

Question

我很难找出执行以下操作的最佳方法。我得到了 0 到 x 个字符串名称，即：Zillow、Trulia。我想要做的是将图像与这些字符串名称相关联，然后将它们显示到列表中。我正在尝试执行 switch 语句，但不确定这是否适用于超过 1 个条件...如果我错了，请纠正我。

例如，变量列表包含两个项目（Zillow/Trulia），我如何检查 ky split 函数变量的多个值，然后添加输出：$('#review-icon-list').wrapInner('<li class="review-icon">' + zillowImg + '</li>');

现在我的 switch case 抛出了一个意外的令牌错误，但我认为我无论如何都没有使用正确的方法。有谁知道我会怎么做？我会做某种循环吗？如果是，我将如何构建它？

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

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