在case语句中对表元素排序时出现问题

Trouble sorting table elements in a case statement

本文关键字：排序 问题 元素 case 语句      更新时间：2023-09-26

我尝试创建一个switch语句，根据用户选择的数字和字母顺序对表的不同元素进行排序。然而，当我试图引用领域的问题。排序函数的Id，它说它没有定义?此外，如果我不定义任何东西，并尝试按第一个字段(ID)排序，它的数字是126在1之前?下面是我到目前为止的代码:

$('#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>

我想你对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>

相关文章：