在case語句中排序表元素時遇到的問題

Question

我試圖創建一個switch語句來根據用戶選擇的數字和字母順序對錶的不同元素進行排序。但是，當我嘗試引用排序函數的字段questions.id時，它說它是未定義的？另外，如果我沒有定義任何內容並嘗試按第一個字段（ID）進行排序，它會在1之前編號126？這裏是我到目前爲止的代碼：

$('#sort').on('click', sort); 
 

 
function sort(){ 
 

 
    //Clear all existing rows, so that additional queries do not pile up on top 
 
    $("#questions tbody tr").remove(); 
 

 
    //Get the JSON data from our HTML and convert it to a JavaScript object 
 
    //In the real world, this data will likely be retrieved from the server via an AJAX request 
 
    var questions = [ 
 
    { 
 
     "id":1, 
 
     "q_category_id":0, 
 
     "q_text":"Which of the following is regarded as the real founder of portugese power in India", 
 
     "q_options_1":"Pedro Cabral", 
 
     "q_options_2":"Almeida", 
 
     "q_options_3":"Vasco da Gama", 
 
     "q_options_4":"Alfonso de Albuquerque", 
 
     "q_correct_option":4, 
 
     "q_difficulty_level":2, 
 
     "q_date_added":"2013-06-10T04:00:00.000Z" 
 
    } 
 
    ]; 
 

 
    var sortquery = $('#sortquestions').val(); 
 

 
    switch (sortquery){ 
 
    case 'Ascending ID': 
 
     console.log(sortquery); 
 
     questions.id.sort() 
 
     break; 
 

 
    case 'Descending ID': 
 
     console.log(sortquery); 
 
     break; 
 

 
    case 'Ascending Alphabetical': 
 
     console.log(sortquery); 
 
     questions.q_text.sort(); 
 
     break; 
 

 
    case 'Descending Alphabetical': 
 
     console.log(sortquery); 
 
     break; 
 

 
    case 'Ascending Difficulty': 
 
     console.log(sortquery); 
 
     break; 
 

 
    case 'Descending Difficulty': 
 
     console.log(sortquery); 
 
     break; 
 
    } 
 

 
    //Loop through the list array and create a table row for each item. 
 
    $.each(questions, function(i, question) { 
 
    var tblRow = '<tr>' + 
 
     '<td>' + question.id + '</td>' + 
 
     '<td>' + question.q_text + '</td>' + 
 
     '<td>' + question.q_options_1 + '</td>' + 
 
     '<td>' + question.q_options_2 + '</td>' + 
 
     '<td>' + question.q_options_3 + '</td>' + 
 
     '<td>' + question.q_options_4 + '</td>' + 
 
     '<td>' + question.q_correct_option + '</td>' + 
 
     '<td>' + question.q_difficulty_level + '</td>' + 
 
     '</tr>' 
 
    //Add our table row to the 'questions' <table> 
 
    $(tblRow).appendTo('#questions tbody'); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="button" id="sort" value="sort" /> 
 
<select id="sortquestions"> 
 
    <option>Ascending ID</option> 
 
    <option>Descending ID</option> 
 
    <option>Ascending Alphabetical</option> 
 
    <option>Descending Alphabetical</option> 
 
    <option>Ascending Difficulty</option> 
 
    <option>Descending Difficulty</option> 
 
</select> 
 
<table id="questions"> 
 
    <tbody></tbody> 
 
</table>

Answer 1

我覺得你是一個有點困惑的sort()功能是如何工作的。我在下面的例子中爲你實現了一個自定義排序。

$('#sort').on('click', sort); 
 

 
function sort(){ 
 

 
    //Clear all existing rows, so that additional queries do not pile up on top 
 
    $("#questions tbody tr").remove(); 
 

 
    //Get the JSON data from our HTML and convert it to a JavaScript object 
 
    //In the real world, this data will likely be retrieved from the server via an AJAX request 
 
    var questions = [ 
 
    { 
 
     "id":1, 
 
     "q_category_id":0, 
 
     "q_text":"Which of the following is regarded as the real founder of portugese power in India", 
 
     "q_options_1":"Pedro Cabral", 
 
     "q_options_2":"Almeida", 
 
     "q_options_3":"Vasco da Gama", 
 
     "q_options_4":"Alfonso de Albuquerque", 
 
     "q_correct_option":4, 
 
     "q_difficulty_level":2, 
 
     "q_date_added":"2013-06-10T04:00:00.000Z" 
 
    }, 
 
    { 
 
     "id":2, 
 
     "q_category_id":0, 
 
     "q_text":"Another question", 
 
     "q_options_1":"A", 
 
     "q_options_2":"B", 
 
     "q_options_3":"C", 
 
     "q_options_4":"D", 
 
     "q_correct_option":4, 
 
     "q_difficulty_level":1, 
 
     "q_date_added":"2014-06-10T04:00:00.000Z" 
 
    } 
 
    ]; 
 

 
    var sortquery = $('#sortquestions').val(); 
 
    
 
    //custom sort based on the selected item in the dropdown 
 
    questions.sort(function(a, b) { 
 
    switch (sortquery){ 
 
     case 'Ascending ID': 
 
     return a.id > b.id; 
 
     case 'Descending ID': 
 
     return b.id > a.id; 
 
     case 'Ascending Alphabetical': 
 
     return a.q_text > b.q_text; 
 
     case 'Descending Alphabetical': 
 
     return b.q_text > a.q_text; 
 
     case 'Ascending Difficulty': 
 
     return a.q_difficulty_level > b.q_difficulty_level; 
 
     case 'Descending Difficulty': 
 
     return b.q_difficulty_level > a.q_difficulty_level; 
 
    } 
 
    }); 
 

 
    //Loop through the list array and create a table row for each item. 
 
    $.each(questions, function(i, question) { 
 
    var tblRow = '<tr>' + 
 
     '<td>' + question.id + '</td>' + 
 
     '<td>' + question.q_text + '</td>' + 
 
     '<td>' + question.q_options_1 + '</td>' + 
 
     '<td>' + question.q_options_2 + '</td>' + 
 
     '<td>' + question.q_options_3 + '</td>' + 
 
     '<td>' + question.q_options_4 + '</td>' + 
 
     '<td>' + question.q_correct_option + '</td>' + 
 
     '<td>' + question.q_difficulty_level + '</td>' + 
 
     '</tr>' 
 
    //Add our table row to the 'questions' <table> 
 
    $(tblRow).appendTo('#questions tbody'); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="button" id="sort" value="sort" /> 
 
<select id="sortquestions"> 
 
    <option>Ascending ID</option> 
 
    <option>Descending ID</option> 
 
    <option>Ascending Alphabetical</option> 
 
    <option>Descending Alphabetical</option> 
 
    <option>Ascending Difficulty</option> 
 
    <option>Descending Difficulty</option> 
 
</select> 
 
<table id="questions"> 
 
    <tbody></tbody> 
 
</table>