排序功能似乎不起作用。 (Javascript)

Question

我希望实现价格排序功能，用户可以使用下拉列表进行排序； “从高到低”，或“从低到高”。

我希望按价格排序的项目是 w3 容器，因为每个都是他们自己的产品。

相反，发生了什么，什么都不是。 当我从下拉菜单中选择“从高到低”或“从低到高”时，我不确定这是为什么。

我将在下面包含相关代码。

 $(document).on("change", ".price-sorting", function() { var sortingMethod = $(this).val(); if(sortingMethod == 'l2h') { sortProductsPriceAscending(); } else if(sortingMethod == 'h2l') { sortProductsPriceDescending(); } }); function getAmount(price){ return parseFloat(price.replace('$', '')); } function sortProductsPriceAscending() { var products = $('.w3-container'); products.sort(function(a, b){ return getAmount($(a).find('.price').text()) - getAmount($(b).find('.price').text()) }); $(".products").html(products); } function sortProductsPriceDescending() { var products = $('.w3-container'); products.sort(function(a, b){ return getAmount($(b).find('.price').text()) - getAmount($(a).find('.price').text()) }); $(".products").html(products); }

 <div style="top:inherit; padding-left:1050px; margin-top: 0px; "> <select class="price-sorting type-regular" name="price-sorting"> <option selected disabled>Sort by price:</option> <option value="l2h">Low to high</option> <option value="h2l">High to low</option> </select> </div> <div id="products" class=" w3-row w3-grayscale" style="width:100%;" > <div class="w3-col l3 s6"> <a href="#"><div class="w3-container" id="Amethyst"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\amethyst1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> </div> </div> <p>Amethyst<br><span class="price">£45.00</span></p> </div></a> <a href="#"><div class="w3-container" id="Placeholder1"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder1<br><span class="price">£0.00</span></p> </div></a> </div> <div class="w3-col l3 s6"> <a href="#"><div class="w3-container" id="Bloodstone"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Bloodstone<br><span class="price">£50.00</span></p> </div> </a> <a href="#"><div class="w3-container" id="Placeholder2"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder2<br><span class="price">£0.00</span></p> </div> </a> </div> <div class="w3-col l3 s6"> <a href="#"><div class="w3-container" id="Placeholder3"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder3<br><span class="price">£0.00</span></p> </div> </a> <a href="#"><div class="w3-container" id="Placeholder4"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder4<br><span class="price">£0.00</span></p> </div> </a> </div> <div class="w3-col l3 s6"> <a href="#"><div class="w3-container" id="Placeholder5"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder5<br><span class="price">£0.00</span></p> </div> </a> <a href="#"><div class="w3-container" id="Placeholder6"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder6<br><span class="price">£0.00</span></p> </div> </a> </div> </div>

如果还有什么我可以添加以提供更多帮助的，我很乐意这样做。 谢谢你的帮助。

Answer 1

下面这个“更正”的片段现在可以在某种程度上起作用，但是可以删除很多重复。 此外，我突然想到，您不仅对 div 进行排序，而且还破坏了其中包含一些<a>元素的初始结构。

我更改的行是：

return parseFloat(price.replace(/[£$€]/,'')); // also remove £

和

products.appendTo("#products");  // the target selector refers to an ID

 $(document).on("change", ".price-sorting", function() { var sortingMethod = $(this).val(); if (sortingMethod == 'l2h') { sortProductsPriceAscending(); } else if (sortingMethod == 'h2l') { sortProductsPriceDescending(); } }); function getAmount(price) { return parseFloat(price.replace(/[£$€]/,'')); } function sortProductsPriceAscending() { var products = $('.w3-container'); products.sort(function(a, b) { return getAmount($(a).find('.price').text()) - getAmount($(b).find('.price').text()) }); products.appendTo("#products"); } function sortProductsPriceDescending() { var products = $('.w3-container'); products.sort(function(a, b) { return getAmount($(b).find('.price').text()) - getAmount($(a).find('.price').text()) }); products.appendTo("#products"); }

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <div style="top:inherit; padding-left:20px; margin-top: 0px; "> <select class="price-sorting type-regular" name="price-sorting"> <option selected disabled>Sort by price:</option> <option value="l2h">Low to high</option> <option value="h2l">High to low</option> </select> </div> <div id="products" class=" w3-row w3-grayscale" style="width:100%;"> <div class="w3-col l3 s6"> <a href="#"> <div class="w3-container" id="Amethyst"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\amethyst1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> </div> </div> <p>Amethyst<br><span class="price">£45.00</span></p> </div> </a> <a href="#"> <div class="w3-container" id="Placeholder1"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder1<br><span class="price">£0.00</span></p> </div> </a> </div> <div class="w3-col l3 s6"> <a href="#"> <div class="w3-container" id="Bloodstone"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Bloodstone<br><span class="price">£50.00</span></p> </div> </a> <a href="#"> <div class="w3-container" id="Placeholder2"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder2<br><span class="price">£10.00</span></p> </div> </a> </div> <div class="w3-col l3 s6"> <a href="#"> <div class="w3-container" id="Placeholder3"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder3<br><span class="price">£0.00</span></p> </div> </a> <a href="#"> <div class="w3-container" id="Placeholder4"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder4<br><span class="price">£35.00</span></p> </div> </a> </div> <div class="w3-col l3 s6"> <a href="#"> <div class="w3-container" id="Placeholder5"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder5<br><span class="price">£5.00</span></p> </div> </a> <a href="#"> <div class="w3-container" id="Placeholder6"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder6<br><span class="price">£10.00</span></p> </div> </a> </div> </div>

第二次更新：
我现在更改了我的第二个片段，以重现父<div class="w3-col l3 s6">中两个<a> -包装的<div>的原始结构：

 const cont = $("#products"), products = $('.w3-container'); $(document).on("change", ".price-sorting", function() { const fact=$(this).val()=='l2h'?1:-1, // sort direction prods=products.sort((...arr)=>fact*arr.map(e=>$(".price",e).text().replace(/[£$€]/,'')) .reduce((a,c)=>ac) ).get(); // sorted DOM el. array cont.empty() while (prods.length) { const div= $('<div class="w3-col l3 s6">'); [prods.shift(),prods.shift()].forEach(el=> el && div.append($('<a href="#"></a>').append(el))) cont.append(div); } });

 .as-console-wrapper {max-height:100% !important}

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <div style="top:inherit; padding-left:20px; margin-top: 0px; "> <select class="price-sorting type-regular" name="price-sorting"> <option selected disabled>Sort by price:</option> <option value="l2h">Low to high</option> <option value="h2l">High to low</option> </select> </div> <div id="products" class=" w3-row w3-grayscale" style="width:100%;"> <div class="w3-col l3 s6"> <a href="#"> <div class="w3-container" id="Amethyst"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\amethyst1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> </div> </div> <p>Amethyst<br><span class="price">£45.00</span></p> </div> </a> <a href="#"> <div class="w3-container" id="Placeholder1"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder1<br><span class="price">£0.00</span></p> </div> </a> </div> <div class="w3-col l3 s6"> <a href="#"> <div class="w3-container" id="Bloodstone"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Bloodstone<br><span class="price">£50.00</span></p> </div> </a> <a href="#"> <div class="w3-container" id="Placeholder2"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder2<br><span class="price">£10.00</span></p> </div> </a> </div> <div class="w3-col l3 s6"> <a href="#"> <div class="w3-container" id="Placeholder3"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder3<br><span class="price">£0.00</span></p> </div> </a> <a href="#"> <div class="w3-container" id="Placeholder4"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder4<br><span class="price">£35.00</span></p> </div> </a> </div> <div class="w3-col l3 s6"> <a href="#"> <div class="w3-container" id="Placeholder5"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder5<br><span class="price">£5.00</span></p> </div> </a> <a href="#"> <div class="w3-container" id="Placeholder6"> <div class="w3-display-container"> <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%"> <div class="w3-display-middle w3-display-hover"> <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button> </div> </div> <p>Placeholder6<br><span class="price">£10.00</span></p> </div> </a> </div> </div>

更新：
为什么原来的布局在排序过程中被“破坏”了？

在原始 HTML 中， div.w3-container元素被<a>元素包围，每个元素都被父<div class="w3-col l3 s6">包围。 排序过程提取div.w3-container元素并将它们一个接一个地直接放入目标元素<div id="products"> - 没有它们原来的“父” <a>和<div class="w3-col l3 s6">元素。

Answer 2

你的排序被英镑符号窒息。

字符串没有减号运算符。 它转换为数字，因为文本以磅符号而不是数字开头，所以始终为零。

“getAmount”函数正在删除一个美元符号，但不是英镑符号。

此外，您不能对 jquery 数组对象进行排序。 您可以使用.toArray()或$.makeArray()