使用JavaScript实现商品价格高低排序失败求助

问题说明 #

尝试实现商品价格从低到高/从高到低排序功能，点击排序选项后页面变为空白，控制台无报错，但排序函数内的console.log能正常输出。

错误原因 #

查看HTML结构可知，#product-list的直接子元素是一个<div>，所有.product-box-3元素都是这个子div的后代，而非#product-list的直接子元素。原代码中使用$productList.children('.product-box-3')只能获取直接子元素，因此得到的是一个空的jQuery集合，执行$productList.html($products)时就会清空页面内容，导致空白。

修复方案 #

将获取商品元素的方式从children()改为find()，这样可以获取所有后代中的.product-box-3元素；同时提取价格解析逻辑，减少代码重复。

修复后的JavaScript代码 #

$(document).ready(function() {
  // 提取价格解析逻辑，避免重复代码
  function getProductPrice($product) {
    return parseFloat($product.find('.price').text().replace('₹', '').replace(',', ''));
  }

  // 价格从低到高排序
  function sortByLowToHigh() {
    var $productList = $('#product-list');
    var $products = $productList.find('.product-box-3');

    $products.sort(function(a, b) {
      var priceA = getProductPrice($(a));
      var priceB = getProductPrice($(b));
      return priceA - priceB;
    });

    // 先清空再添加排序后的元素，保持原有DOM结构
    $productList.find('> div').html($products);
  }

  // 价格从高到低排序
  function sortByHighToLow() {
    var $productList = $('#product-list');
    var $products = $productList.find('.product-box-3');

    $products.sort(function(a, b) {
      var priceA = getProductPrice($(a));
      var priceB = getProductPrice($(b));
      return priceB - priceA;
    });

    $productList.find('> div').html($products);
  }

  // 绑定排序点击事件
  $('#low').click(sortByLowToHigh);
  $('#high').click(sortByHighToLow);
});

关键修改点 #

1. 使用find('.product-box-3')替代children('.product-box-3')，正确获取所有商品元素
2. 提取getProductPrice函数统一处理价格解析，提升代码可维护性
3. 排序后将元素添加到#product-list的直接子div中，保持原有DOM结构不变

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