Javascript 使用数据属性使用jQuery对元素进行排序

让你知道，我是新手。 我试着在我的网站上为菜单导航编程一个特定的功能。（）

我希望我的网站上的访问者能够排序我的项目，要么按“日期”或“相关性”。 我创建此图像是为了让您更好地了解我：

在第一幅图中，项目按照相关性进行分类。因此，“日期”被划破了谷底。当你现在点击刻线槽“日期”时，项目的顺序（2，1，3）会改变。同样发生的是，“相关性”是斯特里克特谷，“日期”不再是了。当然，当你再次点击“relevence”时，这也会反过来起作用。我希望你能明白

我成功地创建了这个编程糟糕的脚本，但这里没有编程的是引人注目的：

var rand=Math.floor（Math.random（）*2）//此处的数字必须是您列出的产品总数
var prod=新数组（）；
prod[0]=“此处已更改！”；
prod[1]=“再次更改！”；
函数loadProd（内容）{
document.getElementById（'fullDescriptp'）。innerHTML=content；
}
document.getElementById（'fullDescriptp'）。innerHTML=prod[rand]；
按钮1
按钮2

我认为您应该将vanilla JavaScript留待以后使用，并使用jQuery库使您的生活更加轻松。你的网站已经在使用它，所以你不需要调整任何东西

下面是一个使用jQuery进行排序的好例子

您所需要的只是提供一些排序标准，上面的示例依赖于数据属性，这对于此类功能非常方便

/**
*此函数用于返回基于数据属性排序的回调。
*
*@param sortCriteria
*用于排序的数据属性的名称。
*@param itemsToSort
*用于排序的项目的字符串选择器。
*@param容器
*放置物品的容器。
*@returns{Function}
*/
var sortByDataAttr=函数（sortCriteria、itemsToSort、container）{
返回函数（）{
//抓取所有物品进行分类。
var$collection=$（itemsToSort）；
//对它们进行排序并附加到容器中。
$collection.sort（函数（a，b）{
返回$（a）.数据（sortCriteria）-（b）.数据（sortCriteria）
}).附于（$（容器））；
};
},
/**
*从所有元素中删除类并应用于当前。
*
*@param电流
*应用类的HTML节点。
*@param-activeClass
*活动状态字符串类。
*/
highlightActive=函数（当前，activeClass）{
$（'..+activeClass）.removeClass（activeClass）；
$（当前）.addClass（activeClass）；
};
//开始时按“数据权重”排序。
highlightActive（'.btn排序权重'，'btn排序--active'）；
sortByDataAttr（'weight'，'.item'，'.list'）；
$（'.btn排序权重'）。在（'click'，function（）上{
highlightActive（这是“btn排序—活动”）；
sortByDataAttr（'weight'，'.item'，'.list'）（）；
});
$（'.btn排序索引'）。在（'click'，function（）上{
highlightActive（这是“btn排序—活动”）；
sortByDataAttr（'index'，'.item'，'.list'）（）；
});
.btn{
文字装饰：线条贯穿；；
}
.btn排序--活动{
文字装饰：无；
}

按重量分类
按索引排序

第一个-权重：5-索引：133
秒-权重：1-索引：2
第三个-权重：16-索引：87
有关排序算法，请访问此网站。您应该通过可伸缩性来克服将来的排序问题。Array.sort（）很有帮助。检查这把小提琴

谢谢你的回答！看来我走错方向了。。。你能给我一个或多或少包含我需要的函数的代码吗？也许你知道一个例子，它很好地满足了我的需要，所以我可以改变“可见词”并使其适应我的网站？我是个笨蛋，对不起…@thomassamot我已经更新了我的答案来演示如何对元素进行排序。谢谢，这很有效。但我还有两个问题。正如在预览（）中一样，我希望更改按钮。现在无法看到哪个按钮处于活动状态？非活动按钮应被敲击。另一个问题：我如何摆脱按钮的外观？我希望按钮看起来像普通文本（如预览中所示）。谢谢@thomassamot我添加了一个突出显示活动状态的功能，关于样式设置，您可以根据您的需要使用他们所说的指南，将
替换为任何其他合适的元素或样式，但同样的代码也适用于按钮。我认为存在某种错误。当我运行截取的代码时，它会使活动按钮变为粗体，但排序不再起作用！？
    function sortAscending(data_A, data_B)
{
    return (data_A - data_B);
}
var array =[ 9, 10, 21, 46, 19, 11]
array.sort(sortAscending) 
alert(array);