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

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

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

Answer 2

以下是我如何根据您的代码编写我所理解的内容：

我想你想检查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);

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

2 个答案: