使用数据属性使用jQuery对元素进行排序
[英]Sorting elements with jQuery using data attributes
问题描述
Just to let you know, I'm a rookie. 
只是想让您知道，我是新秀。 I try to programm a certain function for the menu-navigation on my website. 我尝试为网站上的菜单导航编程某些功能。 ( http://thomasmedicus.at/ ) （ http://thomasmedicus.at/ ）
I want visitors on my website to be able to sort my projects either by "date" or by "relevance". 我希望网站上的访问者能够按“日期”或“相关性”对我的项目进行排序。 I created this image so you can understand me better: preview 我创建了这张图片，以便您可以更好地了解我： 预览
in the first image the projects are sortet by relevance. 在第一个图像中，项目按相关性排序。 therefor "date" is striked trough. 因此，“日期”已触底。 when you now click on the stricked trough "date" the order of the projects (2, 1, 3) changes. 现在，当您单击选中的槽“日期”时，项目的顺序（2、1、3）将发生变化。 what also happens is that "relevance" is strickt trough and "date" not anymore. 还发生的是，“相关性”是低谷，而“日期”已不再。 of course this should also work the other way round when you then click on "relevence" again. 当然，当您再次单击“相关性”时，这也应该相反。 i hope you get the idea!? 我希望你有主意！？
i managed to create this badly programmed script, but what isnt programmed here is the striking through: 我设法创建了这个编程不良的脚本，但是这里没有编程的是惊人的：
<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>
it would be awesome if you can help me here. 如果您能在这里帮助我，那将太好了。 since i am no programmer i'm not able to do it on my own... 由于我不是程序员，所以我不能自己做...
thanks, tom 谢谢，汤姆
2 个解决方案
解决方案1
1 2015-07-13 18:14:07
I think you should leave vanilla JavaScript for later and use jQuery library to make your life much easier. 我认为您应该将原始JavaScript留给以后使用，并使用jQuery库使您的生活更轻松。 Your website is already using it, so you don't have to adjust anything. 您的网站已经在使用它，因此您无需进行任何调整。
Here is a good example of sorting with jQuery jQuery sort elements using data id 这是一个使用jQuery排序的好例子jQuery排序元素使用数据ID
All you need is to provide some criteria for sorting, the example above relies on data-attribute, which is really handy for this kind of functionality. 您所需要做的只是提供一些排序标准，上面的示例依赖于数据属性，这对于此类功能确实非常方便。
/** * 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>
解决方案2
0 2015-07-13 18:17:29
Refer to this site for sorting algorithms http://www.sorting-algorithms.com/ . 请参考此站点以获取排序算法http://www.sorting-algorithms.com/ 。 You should go by scalability to overcome future problems with sorting. 您应该利用可伸缩性来克服将来的排序问题。 Array.sort() is helpful. Array.sort（）很有帮助。 Check this fiddle http://jsfiddle.net/BF8LV/2/ 检查此小提琴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);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.