Question

只是为了让你知道，我是一个新秀。我尝试在我的网站上为菜单导航编程某个功能。（http://thomasmedicus.at/）

我希望我网站上的访问者能够通过＆＃34; date＆＃34;来对我的项目进行排序。或者通过＆＃34;相关性＆＃34;。我创建了这张图片，以便您更好地了解我：preview

在第一张图片中，项目按相关性进行分类。因此＆＃34;日期＆＃34;被打败了。当你现在点击被困的低谷＆＃34; date＆＃34;项目的顺序（2,1,3）发生变化。同样发生的是＆＃34;相关性＆＃34;是一个严峻的低谷和＆＃34;日期＆＃34;不再。当然，当你点击＆＃34; relevence＆＃34;再次。我希望你明白这个主意！？

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

＆＃13;

<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>

＆＃13;

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

谢谢，汤姆

Answer 1

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

这是使用jQuery排序的一个很好的例子 Making Dashboards with Dc.js

您只需提供一些排序标准，上面的示例依赖于data-attribute，这对于这种功能非常方便。

＆＃13;

/** 
 * 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')();
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

请参阅此网站以排序算法http://www.sorting-algorithms.com/。您应该通过可伸缩性来克服排序中的未来问题。 Array.sort（）很有帮助。检查这个小提琴http://jsfiddle.net/BF8LV/2/

 listing.scrollIntoView(true);

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

2 个答案: