排序功能似乎不起作用。 (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()