如何基于jQuery实现电影列表的排序功能？

一、先修正HTML中的下拉菜单ID错误 #

原代码里的下拉选项把id错误嵌套在class属性中，导致jQuery无法正确选中元素，调整为：

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

二、核心逻辑说明 #

• 对象数组使用sort()时必须传入自定义比较函数，默认排序逻辑仅适用于基础类型数组
• 提取独立的列表渲染函数，排序后只需调用该函数即可更新DOM，避免重复代码
• 评分是字符串类型，排序前需转为数字，否则会出现字符串排序的错误结果

三、完整修正后的JavaScript代码 #

替换原有的<script>部分：

let id = 0;
let movies = [];

$(document).ready(function () {
  // 添加电影逻辑
  $("#ad").on("click", function (evt) {
    evt.preventDefault();
    let title = $("#title").val().trim();
    let rating = $("#rating").val().trim();
    
    // 简单输入校验
    if (!title || isNaN(rating) || rating < 0 || rating > 10) {
      alert("请输入有效的片名和0-10之间的评分");
      return;
    }

    let curMovie = { title, rating: Number(rating), id };
    movies.push(curMovie);
    renderMovieList();

    // 清空输入框
    $("#title").val("");
    $("#rating").val("");
    id++;
  });

  // 渲染电影列表函数
  function renderMovieList() {
    $("#movieList").empty();
    movies.forEach(movie => {
      let rem = $("<button class='rem shadow btn btn-danger btn-sm rounded-circle mx-2'>X</button>");
      let li = $("<li>").attr("id", movie.id);
      li.html(`${movie.title}: ${movie.rating}`);
      li.append(rem);
      $("#movieList").append(li);

      // 删除按钮事件
      rem.on("click", function () {
        movies = movies.filter(m => m.id !== movie.id);
        li.remove();
      });
    });
  }

  // 排序事件绑定
  $("#az").on("click", function (e) {
    e.preventDefault();
    // 片名正序（忽略大小写）
    movies.sort((a, b) => a.title.localeCompare(b.title, undefined, { sensitivity: 'base' }));
    renderMovieList();
  });

  $("#za").on("click", function (e) {
    e.preventDefault();
    // 片名倒序
    movies.sort((a, b) => b.title.localeCompare(a.title, undefined, { sensitivity: 'base' }));
    renderMovieList();
  });

  $("#lh").on("click", function (e) {
    e.preventDefault();
    // 评分升序
    movies.sort((a, b) => a.rating - b.rating);
    renderMovieList();
  });

  $("#hl").on("click", function (e) {
    e.preventDefault();
    // 评分降序
    movies.sort((a, b) => b.rating - a.rating);
    renderMovieList();
  });
});

四、关键修复点 #

1. 选择器修复：修正下拉选项的ID写法，确保jQuery能正确绑定点击事件
2. 排序逻辑优化：
   • 片名排序使用localeCompare实现忽略大小写的自然排序
   • 评分排序先转为数字，通过数值减法实现升/降序
3. 数据同步：删除电影时同时从数组中移除对应数据，保证排序时数据源准确
4. 代码复用：封装渲染函数，减少重复DOM操作代码

内容的提问来源于stack exchange，提问作者Jupiter