使用jQuery循環遍歷隨機JSON條目

Question

我想創建一個簡單的flashcard遊戲，其中JSON文件中的人名列表隨機循環（隨機），然後用戶選擇哪個是正確的人。

我有選擇工作的人，但我似乎無法隨機循環JSON文件。我看了here和here，但一直沒有得到任何工作。

這裏是的jsfiddle：http://jsfiddle.net/pacj02xq/1/

HTML：

<div> 
    <h3>Who is this?</h3> 

    <div id="namesOutput"></div> 
</div> 

的JavaScript（jQuery的）：

$(document).ready(function() { 
    var answers = 3; 

    // 
    // Retrieve JSON 
    // 
    $.getJSON("https://gist.githubusercontent.com/keenanpayne/ada118875c2a5c672cd3/raw/8a72fc99c71c911f497200a7db3cc07b2d98dc82/sample.json", function(result) { 
    var staffNumber = 0; 
    var correctAnswer = ""; 
    var correctAnswerID = Math.floor((Math.random() * 3) + 1); 

    // Loop through set 
    $.each(result, function(i, field) { 
     staffNumber++; 

     if (staffNumber == correctAnswerID) { 
     correctAnswer = field.name; 
     } 

     // Output possible answers 
     $("#namesOutput").append('<a class="btn gameBtn" title="' + staffNumber + '">' + field.name + '</a>'); 

     // Break loop depending on level 
     if (staffNumber === answers) { 
     return false; 
     } 
    }); 


    // 
    // Check answer 
    // 
    $(".gameBtn").click(function(e) { 
     e.preventDefault(); 

     if ($(this).attr('title') == correctAnswerID) { 
     $(this).addClass("btn--correct"); 
     $('.btn').not(".btn--correct").addClass("btn--incorrect"); 
     } else { 
     $(this).addClass("btn--incorrect"); 

     } 
    }); 
    }); 
}); 

Answer 1

我會改變工作方式略有方式。當你像你想要的那樣循環播放時，我不會使用隨機索引，而是使用隨機播放方法將項目添加到數組，然後隨機排列它們的順序。

我已經添加了一個shuffle函數和一個對象大小函數來更容易地處理返回的數據。

1）我們循環JSON的結果獲取並存儲一個隨機項作爲正確的答案，其餘的所有其餘部分都被添加到數組中。

2）我們再洗牌不正確的答案，並減少它們的數量爲1小於你需要

3）然後，我們正確的答案添加到不正確的答案的新縮短列表選項的數量，並重新洗牌

4）最後，我們將這個數組展開爲一個字符串並將其附加到DOM。

// courtesy of http://stackoverflow.com/a/6274381/648350 
function shuffle(o){ //v1.0 
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); 
    return o; 
}; 
// courtesy of http://stackoverflow.com/a/6700/648350 
Object.size = function(obj) { 
    var size = 0, key; 
    for (key in obj) { 
     if (obj.hasOwnProperty(key)) size++; 
    } 
    return size; 
}; 


$(document).ready(function() { 
    var answers = 3; 

    // 
    // Retrieve JSON 
    // 
    $.getJSON("https://gist.githubusercontent.com/keenanpayne/ada118875c2a5c672cd3/raw/8a72fc99c71c911f497200a7db3cc07b2d98dc82/sample.json", function(result) { 
    var numberOfResults = Object.size(result); 
    var staffNumber = 0; 
    var correctAnswer = ""; 
    var correctAnswerID = Math.floor((Math.random() * numberOfResults) + 1); 
    var outputHtml = []; 
    // Loop through set 
    $.each(result, function(i, field) { 
     staffNumber++; 

     if (staffNumber == correctAnswerID) { 
     correctAnswer = '<a class="btn gameBtn" title="' + staffNumber + '">' + field.name + '</a>'; // store our correct answer 
     }else{ 
     outputHtml.push('<a class="btn gameBtn" title="' + staffNumber + '">' + field.name + '</a>'); // add all the other answers 
     } 
    }); 
    outputHtml = shuffle(outputHtml).slice(0, answers - 1); // -1 because one answer will come from the 'correct' answer 
    outputHtml.push(correctAnswer); // add correct answer after slicing 
    outputHtml = shuffle(outputHtml); // shuffle the correct answer around again 
    outputHtml = outputHtml.join(''); // flatten outputHtml into single string 
    $("#namesOutput").append(outputHtml); // add it to the DOM 


    // 
    // Check answer 
    // 
    $(".gameBtn").click(function(e) { 
     e.preventDefault(); 

     if ($(this).attr('title') == correctAnswerID) { 
     $(this).addClass("btn--correct"); 
     $('.btn').not(".btn--correct").addClass("btn--incorrect"); 
     } else { 
     $(this).addClass("btn--incorrect"); 

     } 
    }); 
    }); 
}); 

DEMO