如何实现此排序功能？

Question

输入电影标题和您的评分。对几部电影都这样做。当单击“排序”下拉列表中的 a-z 时，电影列表应按字母顺序重新排序。z-a 应使它们向后排序。从低到高应从最低评分到最高排序。从高到低应从 10- 1.

https://wrenjupiter.github.io/movies/

我认为我以前从未使用过排序方法，并且查看文档并不能帮助我理解如何有效地实现它。

我试过这个：

 $("#az").on("click", function () {
      $("#movieList").innerHtml("");
      for (let movie of curMovies) {
        const sorted = $(movies).sort();
        $("movieList").append(sorted);
      }
    });

但它没有任何作用。我是新手，JavaScript 对我来说真的很难。我也应该使用 JQuery。我正在使用自定义引导样式表。

这就是我目前所拥有的

<h1 class="container heading bg-secondary text-light text-center">
      Movies!
    </h1>

    <div class="container text-center">
      <div class="">
        <div class="form-group rounded">
          <hr />
          <form id="form" class="row">
            <div class="input-group col-6">
              <label for="title" class="px-3 py-2">Enter a Title:</label>
              <input
                class="text-center form-control"
                type="text"
                id="title"
                name="title"
                placeholder="Deadpool"
                minlength="2"
              />
            </div>
            <div class="input-group col-6">
              <label for="rating" class="px-3 py-1">Enter a Rating:</label>
              <input
                class="text-center form-control"
                type="text"
                id="rating"
                name="rating"
                placeholder="10"
                minlength="0"
                maxlength="10"
              />
            </div>
            <div class="col-12 pt-4">
              <button
                type="sumbit"
                id="ad"
                class="btn-block shadow btn btn-success"
              >
                Add To List
              </button>
            </div>
          </form>
          <hr />
        </div>
      </div>
    </div>

    <div class="form-group" class="dropdown">
      <button
        class="btn shadow btn-primary dropdown-toggle ml-3"
        type="button"
        id="dropdownMenuButton"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
      >
        Sort
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item id='az'" href="#">A - Z</a>
        <a class="dropdown-item id='za'" href="#">Z - A</a>
        <a class="dropdown-item id='lh'" href="#">Low to high</a>
        <a class="dropdown-item id='hl'" href="#">High to low</a>
      </div>
    </div>
    <div>
      <ul id="movieList"></ul>
    </div>
    <script
      src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>
  </body>
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script>
    let id = 0;
    let movies = [];
    let ids = [id];

    $(document).ready(function () {
      $("#ad").on("click", function (evt) {
        evt.preventDefault();
        let title = $("#title").val();
        let rating = $("#rating").val();
        let rem = $(
          "<button class='rem shadow btn btn-danger btn-sm rounded-circle mx-2'>X</button>"
        );
        let curMovie = { title, rating, id };
        movies.push(curMovie);

        let li = $("<li>");
        li.id = id;
        li.html(curMovie["title"] + ": " + curMovie["rating"]);
        li.append(rem);
        //object wont stringify
        $("#movieList").append(li);
        console.log(curMovie);

        rem.on("click", function () {
          li.remove();
        });
        id++;
      });
    });

https://wrenjupiter.github.io/movies/

Answer 1

正如您所说，您是 JavaScript 新手，我提供了一个工作版本。首先，您尝试使用 jQuery 对电影进行排序的方式不正确。其次，下拉项的 HTML 中有一些语法错误，请执行以下操作即可。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title>Movies</title>
</head>
<body>

<h1 class="container heading bg-secondary text-light text-center">
  Movies!
</h1>

<div class="container text-center">
  <div class="">
    <div class="form-group rounded">
      <hr />
      <form id="form" class="row">
        <div class="input-group col-6">
          <label for="title" class="px-3 py-2">Enter a Title:</label>
          <input class="text-center form-control" type="text" id="title" name="title" placeholder="Deadpool" minlength="2" />
        </div>
        <div class="input-group col-6">
          <label for="rating" class="px-3 py-1">Enter a Rating:</label>
          <input class="text-center form-control" type="text" id="rating" name="rating" placeholder="10" minlength="0" maxlength="10" />
        </div>
        <div class="col-12 pt-4">
          <button type="submit" id="ad" class="btn-block shadow btn btn-success">
            Add To List
          </button>
        </div>
      </form>
      <hr />
    </div>
  </div>
</div>

<div class="form-group" class="dropdown">
  <button class="btn shadow btn-primary dropdown-toggle ml-3" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Sort
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" id="az" href="#">A - Z</a>
    <a class="dropdown-item" id="za" href="#">Z - A</a>
    <a class="dropdown-item" id="lh" href="#">Low to high</a>
    <a class="dropdown-item" id="hl" href="#">High to low</a>
  </div>
</div>
<div>
  <ul id="movieList"></ul>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
  let id = 0;
  let movies = [];
  let ids = [id];

  $(document).ready(function () {
    $("#ad").on("click", function (evt) {
      evt.preventDefault();
      let title = $("#title").val();
      let rating = $("#rating").val();
      let rem = $("<button class='rem shadow btn btn-danger btn-sm rounded-circle mx-2'>X</button>");
      let curMovie = { title, rating, id };
      movies.push(curMovie);

      let li = $("<li>");
      li.id = id;
      li.html(curMovie["title"] + ": " + curMovie["rating"]);
      li.append(rem);
      $("#movieList").append(li);

      rem.on("click", function () {
        li.remove();
      });
      id++;
    });

    $("#az").on("click", function () {
      movies.sort((a, b) => a.title.localeCompare(b.title));
      displayMovies();
    });

    $("#za").on("click", function () {
      movies.sort((a, b) => b.title.localeCompare(a.title));
      displayMovies();
    });

    $("#lh").on("click", function () {
      movies.sort((a, b) => a.rating - b.rating);
      displayMovies();
    });

    $("#hl").on("click", function () {
      movies.sort((a, b) => b.rating - a.rating);
      displayMovies();
    });

    function displayMovies() {
      $("#movieList").empty();
      for (let movie of movies) {
        let li = $("<li>");
        li.id = movie.id;
        li.html(movie.title + ": " + movie.rating);
        let rem = $("<button class='rem shadow btn btn-danger btn-sm rounded-circle mx-2'>X</button>");
        li.append(rem);
        $("#movieList").append(li);

        rem.on("click", function () {
          li.remove();
        });
      }
    }
  });
</script>
</body>
</html>