如何使用JQuery

时间:2018-10-15 16:26:19

标签: javascript jquery

因此,我尝试通过几个数据属性对某些元素进行排序。

一个是价格,该数字的范围是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')();
});

0 个答案:

没有答案