Javascript 如何使用jquery按价格排序

你好，我有一个问题，按价格排序的产品，这是我的代码。我正在尝试对产品盒进行分类，但它不起作用

$（文档）.on（“更改”，“价格排序”，函数（）{
var sortingMethod=$（this.val（）；
if（排序方法=='l2h'）
{
SORTPRODUCTSPRICENCENding（）；
}
else if（排序方法=='h2l'）
{
sortProductsPriceDescending（）；
}
});
函数sortproductspricencending（）
{
var产品=$（“.product”）；
products.sort（函数（a，b）{return$（a）.data（“price”）-$（b）.data（“price”）}）；
$（“.products grid”）.html（产品）；
}
函数sortProductsPriceDescending（）
{
var产品=$（“.product”）；
products.sort（函数（a，b）{return$（b）.data（“price”）-$（a）.data（“price”）}）；
$（“.products grid”）.html（产品）；
}
违约
从低到高
从高到低
价格：300美元$

颜色：

价格：
6$
颜色：

价格：30美元$

颜色：

价格：20美元$

颜色：

我对您的代码做了一些更新

您得到的不是价格值，而是排序中的节点，因此无法进行比较

$（document）.on（“更改”，“价格排序”，函数（））{
var sortingMethod=$（this.val（）；
if（排序方法=='l2h'）
{
SORTPRODUCTSPRICENCENding（）；
}
else if（排序方法=='h2l'）
{
sortProductsPriceDescending（）；
}
});
函数getAmount（价格）{
返回分析浮动（价格.替换（'$，''）；
}
函数sortproductspricencending（）
{
变量产品=$（'.productbox'）；
products.sort（函数（a，b）{return getAmount（$（a）.children（'.price'）.text（））-getAmount（$（b）.children（'.price'）.text（））}）；
$（“.products grid”）.html（产品）；
}
函数sortProductsPriceDescending（）
{
变量产品=$（'.productbox'）；
products.sort（函数（a，b）{return getAmount（$（b）.children（'.price'）.text（））-getAmount（$（a）.children（'.price'）.text（））}）；
$（“.products grid”）.html（产品）；
}

违约
从低到高
从高到低
价格：300美元$

颜色：

价格：
6$
颜色：

价格：30美元$

颜色：

价格：20美元$

颜色：

所以，有几件事需要注意：

HTML元素从上到下加载。因此，如果将脚本放在

标记中，您的事件侦听器将面临风险：

$（文档）。在（“更改”上，“.price sorting”

将面临无法实际附加到元素的风险。请参阅，或将脚本附加到页面底部

其次，我注意到您没有针对我在页面上可以找到的元素：

$（'.product'）

，并且您还希望

数据价格

出现在您所瞄准的元素上，而实际上它出现在子锚标记上

为了修复您的代码，我更新了两件事：

我将

数据价格

属性放在父元素本身上：

（当然是针对所有人）

并针对productbox：

var-products=$（'.productbox'）；

---

和预期的排序功能。

考虑以下代码

$（函数（）{
函数sortProductsPrice（dir）{
var乘积=[]；
var PAR＝$（“产品盒：EQ（0）））。
$（'.productbox'）。每个（函数（i，el）{
产品.推送（el）；
});
if（dir==“l2h”）{
产品.分类（功能（a，b）{
返回parseInt（$（“.price”，a.text（））-parseInt（$（“.price”，b.text（））；
});
}否则{
产品.分类（功能（a，b）{
返回parseInt（$（.price），b.text（））-parseInt（$（.price，a.text（））；
});
}
PAL html（“”）；
$。每个（产品、功能（i、el）{
追加（EL）；
});
}
$（文档）.on（“更改”，“价格排序”，函数（）{
var方法=$（this.val（）；
如果（方法！=“默认值”）{
sortProductsPrice（方法）；
}
});
})；

违约
从低到高
从高到低
价格：

300$
颜色：

价格：

6$
颜色：

价格：

30$
颜色：

价格：

20$
颜色：

您是否尝试过

console.log（产品）

。这是您尝试对其进行排序的dom元素，而不是值。感谢您审阅更改了脚本位置，现在它位于底部。您告诉我的方式我最近尝试过，但不幸的是没有成功，但问题尚未解决，感谢感谢感谢您审阅和修复它。它正在工作，并帮助我学习新的内容