Question

我尝试创建一个switch语句，以数字和字母顺序对表的不同元素进行排序，具体取决于用户选择的内容。但是，当我尝试引用字段questions.id的sort函数时，它说它是未定义的？另外，如果我没有定义任何内容并尝试按第一个字段（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>

麻烦在case语句中排序表元素

1 个答案: