Question

我有for loop循环遍历数组和switch语句来匹配值。当匹配时，我会向身体附加<div>。现在，我正在使用附加中当前循环的索引，并想知道是否有更简单的方法（尽管这并不是疯狂）。

我的主要兴趣是看看是否有办法避免重写这一行......

$("#cssLiveConsole").append("<div id='cssLive" + styles[s] + "' class='option-wrap'>" + styles[s] + "</div>");

以下是loop和switch

        var s;
        for (s = 0; s < styles.length; s += 1) {
            switch (styles[s]) {
            case "font-family":
                console.log(styles[s]); // **For Testing - Removable**
                $("#cssLiveConsole").append("<div id='cssLive" + styles[s] + "' class='option-wrap'>" + styles[s] + "</div>");
                break;
            case "font-size":
                console.log(styles[s]); // **For Testing - Removable**
                $("#cssLiveConsole").append("<div id='cssLive" + styles[s] + "' class='option-wrap'>" + styles[s] + "</div>");
                break;
            case "font-color":
                console.log(styles[s]); // **For Testing - Removable**
                $("#cssLiveConsole").append("<div id='cssLive" + styles[s] + "' class='option-wrap'>" + styles[s] + "</div>");
                break;
            case "font-hover":
                console.log(styles[s]); // **For Testing - Removable**
                $("#cssLiveConsole").append("<div id='cssLive" + styles[s] + "' class='option-wrap'>" + styles[s] + "</div>");
                break;
            case "background-color":
                console.log(styles[s]); // **For Testing - Removable**
                $("#cssLiveConsole").append("<div id='cssLive" + styles[s] + "' class='option-wrap'>" + styles[s] + "</div>");
                break;
            case "background-hover":
                console.log(styles[s]); // **For Testing - Removable**
                $("#cssLiveConsole").append("<div id='cssLive" + styles[s] + "' class='option-wrap'>" + styles[s] + "</div>");
                break;
            }
        }

提前谢谢！

Answer 1

    var tests = {
        'font-family': true,
        'font-size': true,
        'font-color': true,
        'font-hover': true,
        'background-color': true,
        'background-hover': true
    };
    for (var s = 0; s < styles.length; ++s ) {
        if ( tests[styles[s]] )
        {
            console.log(styles[s]); // **For Testing - Removable**
            $("#cssLiveConsole").append("<div id='cssLive" + styles[s] + "' class='option-wrap'>" + styles[s] + "</div>");
        }
    }

Answer 2

var acceptable = ['font-family', 'font-size', 'font-color', 'font-hover', 'background-color', 'background-hover'];

$.each(styles, function(i, style){
    if($.inArray(style, acceptable)){
        $("#cssLiveConsole").append("<div id='cssLive" + styles[i] + "' class='option-wrap'>" + styles[i] + "</div>");
    }
});

用于环路/交换机优化

2 个答案: