因此,我尝试通过几个数据属性对某些元素进行排序。
一个是价格,该数字的范围是1-4。我已经想出了如何按最低的顺序进行操作,但似乎无法按最高的顺序进行工作。
第二个是创建人,它从我的Django后端输出日期/时间。
我的问题:
样本元素:
<li class="browse-item" data-price="1" data-created="Oct. 10, 2018, 3:25 a.m.">
<a href="#</a>
<p>Oct. 10, 2018, 3:25 a.m.</p>
<p>1</p>
</li>
这是我的Javascript当前的样子-我在网上找到了它,对一般编程来说还是很新的东西。
/**
* 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-created' at the start.
highlightActive('.btn-sort-created', 'btn-sort--active');
sortByDataAttr('created', '.browse-item', '.browse-list');
$('.btn-sort-created').on('click', function() {
highlightActive(this, 'btn-sort--active');
sortByDataAttr('created', '.browse-item', '.browse-list')();
});
$('.btn-sort-price-lowest').on('click', function() {
highlightActive(this, 'btn-sort--active');
sortByDataAttr('price', '.browse-item', '.browse-list')();
});
$('.btn-sort-price-highest').on('click', function() {
highlightActive(this, 'btn-sort--active');
sortByDataAttr('-price', '.browse-item', '.browse-list')();
});