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

【问题标题】：Sorting elements with jQuery using data attributes使用数据属性使用 jQuery 对元素进行排序
【发布时间】：2015-07-13 17:56:36
【问题描述】：

只是让你知道，我是一个菜鸟。我尝试为我的网站上的菜单导航编程某个功能。 (http://thomasmedicus.at/)

我希望我网站上的访问者能够按“日期”或“相关性”对我的项目进行排序。我创建了这张图片，以便您更好地理解我：preview

在第一张图片中，项目按相关性排序。因此，“日期”被击中。当您现在单击受打击的低谷“日期”时，项目（2、1、3）的顺序会发生变化。同样发生的事情是“相关性”已成为低谷，“日期”不再是。当然，当您再次单击“相关性”时，这也应该反过来起作用。我希望你明白！？

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

<html>
<head>
<style type="text/css">
<!--
body {
	text-align: left;
}
#fullDescrip {
	width: 450px;
	height: 200px;
	border: solid #000000 2px;
	margin: 0 auto;
	text-align: justify;
	padding: 20px;


}
#prodContainer .products {
	margin: 10px;
	border: solid #AAAAAA 1px;
	width: 100px;
	height: 100px;


}
#prodContainer2 .products {
	margin: 10px;
	border: solid #AAAAAA 1px;
	width: 100px;
	height: 100px;

}
-->
</style>
<script>
	var rand = Math.floor(Math.random() * 2);//the number here must be the total number of products you have listed
	var prod = new Array();
	prod[0] = "<width='100' height='100'>changed here!";
	prod[1] = "<width='100' height='100'>changed again!";

	function loadProd(content){
		document.getElementById('fullDescrip').innerHTML = content;
	}
</script>





</head>

<body>
<div id="fullDescrip">
<script>
document.getElementById('fullDescrip').innerHTML = prod[rand];

</script>
</div>

        <table id="prodContainer">
	<tr>
     	<td>
        <div id="prod1" class="products" onClick="loadProd(prod[0])">
        button 1
        </div>
        </td>
        <td>

        <table id="prodContainer2">
	<tr>
    	<td>
        <div id="prod2" class="products" onClick="loadProd(prod[1])">
        button 2
        </div>
        </td>


        
</body>
</html>

如果你能在这里帮助我，那就太棒了。因为我不是程序员，所以我不能自己做......

谢谢，汤姆

【问题讨论】：

标签： javascript jquery sorting

【解决方案1】：

我认为您应该将原版 JavaScript 留到以后使用，并使用 jQuery 库让您的生活更轻松。您的网站已经在使用它，因此您无需进行任何调整。

这是一个使用 jQuery 进行排序的好例子 jQuery sort elements using data id

你只需要提供一些排序标准，上面的例子依赖于数据属性，这对于这种功能来说真的很方便。

/** 
 * This function returns a callback for data-attribute based sorting.
 *
 * @param sortCriteria
 *   Name of the data-attribute for sorting.
 * @param itemsToSort
 *   A string selector for items for sorting.
 * @param container
 *   A container to put items.
 * @returns {Function}
 */
var sortByDataAttr = function(sortCriteria, itemsToSort, container) {
    return function() {

      // Grab all the items for sorting.
      var $collection = $(itemsToSort);

      // Sort them and append in to container.
      $collection.sort(function(a, b) {
        return $(a).data(sortCriteria) - $(b).data(sortCriteria)
      }).appendTo($(container));
    };
  },
  /**
   * Remove class from all elements and apply to current.
   *
   * @param current
   *   HTML node to apply class.
   * @param activeClass
   *   Active-state string class.
   */
  highlightActive = function(current, activeClass) {
    $('.' + activeClass).removeClass(activeClass);
    $(current).addClass(activeClass);
  };

// Sort by 'data-weight' at the start.
highlightActive('.btn-sort-weight', 'btn-sort--active');
sortByDataAttr('weight', '.item', '.list');

$('.btn-sort-weight').on('click', function() {
  highlightActive(this, 'btn-sort--active');
  sortByDataAttr('weight', '.item', '.list')();
});

$('.btn-sort-index').on('click', function() {
  highlightActive(this, 'btn-sort--active');
  sortByDataAttr('index', '.item', '.list')();
});

.btn {
  text-decoration: line-through;;
}

.btn-sort--active {
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-sort-weight">Sort by weight</button>
<button class="btn btn-sort-index">Sort by index</button>
<ul class="list">
  <li class="item" data-index="133" data-weight="5">First - weight: 5 - index: 133</li>
  <li class="item" data-index="2" data-weight="1">Second - weight: 1 - index: 2</li>
  <li class="item" data-index="87" data-weight="16">Third - weight: 16 - index: 87</li>
</ul>

【讨论】：

感谢您的回答！看起来我走错了路……你能给我一个或多或少包含我需要的功能的代码吗？也许您知道一个几乎可以满足我需要的示例，因此我可以更改“可见词”并将其适应我的网站？我是菜鸟，对不起...
@thomassamot 我已经更新了我的答案来演示如何对元素进行排序。
谢谢，这行得通。但我还有两个问题。就像在预览中（thomasmedicus.at/wp-content/uploads/2015/07/preview.gif）我想要改变按钮。现在无法查看哪个按钮处于活动状态？不活动的按钮应该被击中。另一个问题：我怎样才能摆脱按钮外观？我希望按钮看起来像普通文本（如预览所示）。谢谢！
@thomassamot 我添加了一个突出显示活动状态的功能，关于样式，您可以根据需要使用本指南@987654323 将<button> 替换为任何其他合适的元素或样式@ 他们说的是<input>，但同样的代码也适用于按钮。
我认为存在某种错误。当我运行截断的代码时，它会使活动按钮变为粗体，但排序不再起作用！？

【解决方案2】：

请参阅此站点以了解排序算法http://www.sorting-algorithms.com/。您应该通过可扩展性来克服未来的排序问题。Array.sort() 很有帮助。检查这个小提琴http://jsfiddle.net/BF8LV/2/

    function sortAscending(data_A, data_B)
{
    return (data_A - data_B);
}
var array =[ 9, 10, 21, 46, 19, 11]
array.sort(sortAscending) 
alert(array);

【讨论】：