使用Javascript - 基於URL

顯示測驗的問題，我有一個簡單的JavaScript測驗設立codepen http://codepen.io/anon/pen/dYNKJL 使用Javascript - 基於URL

它顯示每頁的一個問題，一旦你選擇一個答案，你移動到下一個問題。無論選擇何種答案，都會給予「積極」類，以便在測驗結束時獲得所有選定的答案。

每個答案都有1或2的data-quizIndex。當我收集所有「主動」答案時，我可以看到他們是否回答了1（第一個答案）的data-quizIndex，反之亦然。

無論如何，直到這一點，事情運作良好。但是，我現在正在嘗試做其他事情。用戶通過一個鏈接指向這個測驗，和鏈接將是以下

www.something.com/index.html?qa=0 
www.something.com/index.html?qa=1 
www.something.com/index.html?qa=2

，他們都來自該頁面一個有一個問題，他們可以回答的預覽。使用JavaScript，我需要獲得不應該成爲問題的qa值。如果qa爲0，則問題從問題1開始，不需要做任何事情。如果qa是1或2，則測驗應該從問題2開始，問題1的活動類應該設置爲li，其中data-quizIndex 1或data-quizIndex 2（取決於ga值）。

換句話說，如果他們從將問題重定向到測驗的頁面回答問題之一，我需要使問題在主要測驗應用程序中得到解答。

這是可能的，如果是這樣，實現這一目標的最佳方法是什麼？

感謝

來源

2015-09-30 kate_hudson

可以定義queryString屬性爲location，如：

if (typeof location.queryString === 'undefined') { 
    Object.defineProperty(location, 'queryString', { 
    get: function() { 
     return location.search.slice(1).split('&').map(function(i) { 
     var arr = i.split('='); 
     var a = {}; 
     a[decodeURIComponent(arr[0])] = arr[1] ? decodeURIComponent(arr[1]) : void 0; 
     return a; 
     }).reduce(function(a, b) { 
     var key = Object.keys(b)[0]; 
     a[key] = b[key]; 
     return a; 
     }); 
    } 
    }); 
}

然後，你可以使用它時，頁面加載，這樣的：

$(function() { 
    var qa = location.queryString['qa']; 
    if (qa === '1' || qa === '2') { 
    $('.current .quiz-answer')[qa - 1].click(); 
    } 
});

既然你想模擬第一個問題得到了答案，那麼重複代碼要比用戶點擊它好得多。看看你的updated codepen。

改變查詢字符串，並重新加載它，你會發現它的工作就像一個魅力！ :)

來源

2015-09-30 22:08:50 Buzinas

使用Javascript - 基於URL

回答

相關問題