我希望实现一个价格排序功能，用户可以使用下拉菜单来排序;"从高到低"或"从低到高"。
我要按价格排序的项目是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:UsersHarrison GobeyDownloadsDiceamethyst1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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>如果有什么我可以补充的，我很乐意这样做。谢谢你的帮助。
此"已更正";下面的代码片段现在以某种方式工作，但有很多重复可以删除。而且，我突然想到，您不仅对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:UsersHarrison GobeyDownloadsDiceamethyst1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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)=>a-c) ).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:UsersHarrison GobeyDownloadsDiceamethyst1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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:UsersHarrison GobeyDownloadsDicebloodstone1.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">元素。
你的排序被磅符号卡住了。
字符串没有减号操作符。它转换为数字，该数字始终为零，因为文本以英镑符号开始，而不是数字。
"getAmount"函数正在删除美元符号，但没有删除磅符号。
同样，你不能对jquery数组对象排序。您可以使用.toArray()或$.makeArray()