Question

对于作业，我需要创建一个根据用户偏好输出手机合约的网站。我目前被困在任务的DOM部分。

我想将结果输出到我已设法做的列表中，但我确信使用更少的代码可以更好地完成此操作。这是我到目前为止：https://jsfiddle.net/fn2ewtck/

我想改进的代码是：

function search() {
var userBrandCtrl = document.getElementById("userBrand");
var userBrand = userBrandCtrl.value;

var userModelCtrl = document.getElementById("userModel");
var userModel = userModelCtrl.value;

var userNetworkCtrl = document.getElementById("userNetwork");
var userNetwork = userNetworkCtrl.value;


for (var i = 0; cont.length; i++) {
    if (userBrand === cont[i].brand && userModel === cont[i].model && userNetwork === cont[i].network) {
        var body = document.body;

        var ulCont = document.createElement("ul");

        var liBrand = document.createElement("li");
        var liModel = document.createElement("li");
        var liNetwork = document.createElement("li");
        var liMins = document.createElement("li");
        var liTexts = document.createElement("li");
        var liData = document.createElement("li");
        var liUpfront = document.createElement("li");
        var liMonthly = document.createElement("li");
        var liLength = document.createElement("li");

        var textBrand = document.createTextNode("Brand: " + cont[i].brand);
        var textModel = document.createTextNode("Model: " + cont[i].model);
        var textNetwork = document.createTextNode("Network " + cont[i].network);
        var textMins = document.createTextNode("Mins: " + cont[i].mins);
        var textTexts = document.createTextNode("Texts: " + cont[i].texts);
        var textData = document.createTextNode("Data: " + cont[i].data);
        var textUpfront = document.createTextNode("Upfront: " + cont[i].upfront);
        var textMonthly = document.createTextNode("Monthly: " + cont[i].monthly);
        var textLength = document.createTextNode("Length: " + cont[i].length);

        liBrand.appendChild(textBrand);
        liModel.appendChild(textModel);
        liNetwork.appendChild(textNetwork);
        liMins.appendChild(textMins);
        liTexts.appendChild(textTexts);
        liData.appendChild(textData);
        liUpfront.appendChild(textUpfront);
        liMonthly.appendChild(textMonthly);
        liLength.appendChild(textLength);

        ulCont.appendChild(liBrand);
        ulCont.appendChild(liModel);
        ulCont.appendChild(liNetwork);
        ulCont.appendChild(liMins);
        ulCont.appendChild(liTexts);
        ulCont.appendChild(liData);
        ulCont.appendChild(liUpfront);
        ulCont.appendChild(liMonthly);
        ulCont.appendChild(liLength);

        body.appendChild(ulCont);

    }
}

};

我怎么能做得更好？感谢。

Answer 1

您可以创建一个要从对象中显示的属性数组，并像这样循环它们：

var arr = ['brand', 'model', 'network', 'mins']
for (i = 0; i < arr.length; i++) {
    //Upercase first letter
    var label = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
    //create html elements
    var li = document.createElement("li"),
        text = document.createTextNode(label + ": " + cont[i][arr[i]]);
    li.appendChild(text);
    ulCont.appendChild(li);
}
//append to body after loop
body.appendChild(ulCont);

Answer 2

您应该查看Backbone和Dust。他们会帮助您模拟您尝试编写的HTML。

挣扎着重复使用JavaScript和DOM的代码

2 个答案: