JS/JQ获取数据填充页面

Question

先上代码：

//点击一个按钮事件
    $(".lv-ticketUl").on("click", "a", function () {
    var a = $(this).attr("data-deptime");
    var b = $(this).attr("data-arrtime");
    var c = $(this).attr("data-jumpurl");
    // console.log(c);
    // console.log(c + '&' + a + '&' + b);
    window.location = c + '&deptime=' + encodeURI(a) + '&arrtime=' + encodeURI(b);
});

//一个获取url参数方法
function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = window.location.search.substr(1).match(reg);
    if (r !== null) {
        return decodeURI(r[2]);
    }
    return null;
}

//在页面显示获取的数据
$(".trainNum").text("" + getQueryString("trains") + "");
$(".trainFrom").text("" + getQueryString("from") + "");
$(".trainTo").text("" + getQueryString("to") + "");
$(".lv-FromDate").text("" + getQueryString("Fromdate") + "");
$(".lv-ArriveDate").text("" + getQueryString("Arrivedate") + "");
$(".lv-seatType").text("" + getQueryString("seatType") + "");
$(".lv-start").text("" + getQueryString("deptime") + "");
$(".lv-end").text("" + getQueryString("arrtime") + "");
$(".lv-duration").text("" + getQueryString("duraTion") + "");

前端显示的效果截图：

问题：功能我实现了，但是我很怀疑我写的这段代码感觉不是很精简，冗余太多，如果有20个参数，难道要写20行，我想过循环遍历，感觉循环遍历有没必要。如下：

请问经验丰富的论坛大牛，这种写法是不是很垃圾，有没有更高效，精简的写法。谢谢！
JS初学者

Answer 1

查表啊，你构建一个类名和查询字符串对应的表，然后遍历这个表啊。别的不说，减少代码是肯定可以的。

Answer 2

for(var key in obj){
    ("."+key).text(obj[key]);
}

第一种 写一个obj存储

var obj = {
    "trainNum":getQueryString("trains")
}

第二种直接读取url生成对象格式
元素class要修改，有规律

Answer 3

你把你需要赋值的那些div加个id或者额外class，值就是url查询参数的键，这样你只需要解析url查询参数一个for循环即可，以后加参数只要改html不用改js了。大概代码就是：

(function(){
    try{
        var s = location.search.substring(1), kv;
        if(!s) return;
        s = s.split('&');
        for(var k in s){
            kv = s[k].split('=');
            $("#" + kv[0]).text(kv[1]);
        }
    }catch(e){}    
})();

Answer 4

这种情况你需要用“模板”，推荐 Handlebars。