1

割り当てのために、ユーザーの好みに基づいて携帯電話の契約を出力する Web サイトを作成する必要があります。私は現在、割り当ての 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);

    }
}

};

どうすればこれを改善できますか？ありがとう。

4

2 に答える 2

3

オブジェクトから表示するプロパティの配列を作成し、次のようにループすることができます。

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);
于 2015-04-28T14:14:28.113 に答える
0

BackboneとDustを見る必要があります。それらは、作成しようとしている HTML をテンプレート化するのに役立ちます。

于 2015-04-28T14:15:46.760 に答える