在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>