鍍金池/ 問答/HTML/ JS/JQ獲取數(shù)據(jù)填充頁面

JS/JQ獲取數(shù)據(jù)填充頁面

先上代碼：

//點擊一個按鈕事件
    $(".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參數(shù)方法
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;
}

//在頁面顯示獲取的數(shù)據(jù)
$(".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") + "");

前端顯示的效果截圖：

clipboard.png

問題：功能我實現(xiàn)了，但是我很懷疑我寫的這段代碼感覺不是很精簡，冗余太多，如果有20個參數(shù)，難道要寫20行，我想過循環(huán)遍歷，感覺循環(huán)遍歷有沒必要。如下：

clipboard.png

請問經(jīng)驗豐富的論壇大牛，這種寫法是不是很垃圾，有沒有更高效，精簡的寫法。謝謝！
JS初學(xué)者

回答
編輯回答
任她鬧

你把你需要賦值的那些div加個id或者額外class，值就是url查詢參數(shù)的鍵，這樣你只需要解析url查詢參數(shù)一個for循環(huán)即可，以后加參數(shù)只要改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){}    
})();
2017年9月9日 15:50
編輯回答
玄鳥

查表啊，你構(gòu)建一個類名和查詢字符串對應(yīng)的表，然后遍歷這個表啊。別的不說，減少代碼是肯定可以的。

2018年4月6日 06:15
編輯回答
命于你

這種情況你需要用“模板”，推薦 Handlebars。

2018年6月30日 01:11
編輯回答
愿如初
for(var key in obj){
    ("."+key).text(obj[key]);
}

第一種 寫一個obj存儲

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

第二種直接讀取url生成對象格式
元素class要修改，有規(guī)律

2017年3月21日 18:42