Javascript 使用数据属性和JS对div进行排序

大约5个月前，我问了一个几乎相同的问题，得到了一个很好的答案，在当时似乎是可行的。从那以后，我休息了一下，连一行代码都没有看。现在我有了一些空闲时间，我意识到我对Javascript已经很生疏了

上一个问题的链接：

这是我现在的JSFIDLE。jsfiddle.net/wtckhkdq/3/

如您所见，我有4个div，具有各种数据属性，包括price、上市日期和字母排名。我试图让脚本工作，这样当按下每个按钮时，它会根据引用的函数对div进行排序。我的JSFIDLE将无法正常运行，在多次查看之后，我似乎无法找到问题所在。提前感谢，祝大家新年快乐

您需要包括

jquery

库才能使用它

在JSFIDLE中，由于他们编写最终输出生成器的方式，js作用域存在问题，因此您创建的函数在html块中不可见。您可以通过将jsiddle中的

函数sortDateNewOld（）{

更改为

sortDateNewOld=function（）{

，来解决这个问题

这里有一个解决方案（一切正常）

var divList=$（“.listing”）；
函数sortDateNewOld（）{
排序（函数（a，b）{return$（b）.data（“date”）-$（a）.data（“date”）}）；
$（“#列表”）.html（divList）；
}
函数sortDateOldNew（）{
排序（函数（a，b）{return$（a）.data（“date”）-$（b）.data（“date”）}）；
$（“#list”）.html（divList）；}
函数sortPriceHighLow（）{
排序（函数（a，b）{return$（b）.data（“price”）-$（a）.data（“price”）}）；
$（“#list”）.html（divList）；}
函数sortPriceLowHigh（）{
排序（函数（a，b）{return$（a）.data（“price”）-$（b）.data（“price”）}）；
$（“#list”）.html（divList）；}
函数sortAlphAZ（）{
sort（函数（a，b）{return$（a）.data（“alph”）-$（b）.data（“alph”）}）；
$（“#list”）.html（divList）；}
函数sortAlphZA（）{
sort（函数（a，b）{return$（b.data（“alph”）-$（a.data（“alph”）}）；
$（“#list”）.html（divList）；}

。按钮{
字体大小：15px；宽度：120px；高度：30px；背景色：白色；显示：内联块；光标：指针；}
.上市{
宽度：342px；高度：282px；边框半径：7px；背景颜色：#f1f1f1；边距：自动；边距顶部：80px；位置：相对；方框阴影：0px 15px 20px rgba（0,0,0,0.15）；}
.listinginfo{
宽度：342px；高度：64px；边框右下半径：7px；边框左下半径：7px；背景色：白色；位置：绝对；底部：0；左侧：0；方框阴影：0px-4px 10px rgba（0,0,0,0.05）；字体大小：10px；}

新旧约会
新旧
命名A-Z
名称Z-A
价格高低
价格低高
AAA

价格：$99

日期：2017年12月1日
AAB

价格：$199

日期：2017年12月2日
AAC

价格：$299

日期：2017年12月3日
AAD

价格：$399

日期：2017年12月4日

你的第二点可能会被误解为JSFIDLE本身有问题。@trincot，你说得对，观点很好。我会更新这一部分以使其更准确：）谢谢！@trincot你能检查一下并让我知道你是否认为现在更好了吗？事实上，JSFIDLE中有一个选项允许你指定如何/何时使用JavaScript脚本面板左上角JavaScript图标上的oaded.Cick.nice:）不记得了！关于我的解释-现在好点了吗？