Question

我在Codepen上找到了此代码，对其进行了一些修改，但不知道再次点击该按钮时如何显示默认列表。

单击该按钮时，列表将按字母顺序排列，但再次单击该列表时，我希望它返回默认值。

similarity.compareTo(it.similarity)

Answer 1

使用jQuery＆＃39; data()方法为初始状态指定位置：

$("li", "#test").each(function(idx) {
  $(this).data('position', idx);
});

如果按钮的文字是＆＃34;按默认排序，＆＃34;根据初始位置排序。否则，根据文本排序：

$("button").click(function() {
  $("li", "#test").sort(function(a, b) {
    if($("button").text() === "Sort by Default") {
      return $(a).data('position') - $(b).data('position');
    }
    else {  //Sort by Title
      return $(a).text() > $(b).text() ? 1 :
             $(a).text() < $(b).text() ? -1 :
             0
    }
  }).appendTo("#test");

请注意，我已经更改了＆＃34;按标题排序＆＃34;算法。您借用的代码仅在true方法中返回false或sort()，但这并不能保证排序正确。相反，sort()方法应返回大于0,0或小于0的数字，具体取决于第一个参数是否大于，等于或小于第二个参数。

最后，点击时切换按钮的文字：

  $(this).text(function(_, txt) {
    return txt === "Sort by Default" ? "Sort by Title" : "Sort by Default";
  });

<强>段：

＆＃13;

$("li", "#test").each(function(idx) {
  $(this).data('position', idx);
});

$("button").click(function() {
  $("li", "#test").sort(function(a, b) {
    if($("button").text() === "Sort by Default") {
      return $(a).data('position') - $(b).data('position');
    }
    else {
      return $(a).text() > $(b).text() ? 1 :
             $(a).text() < $(b).text() ? -1 :
             0
    }
  }).appendTo("#test");

  $(this).text(function(_, txt) {
    return txt === "Sort by Default" ? "Sort by Title" : "Sort by Default";
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="test">
  <li>Sem lacinia quam venenatis vestibulum.</li>
  <li>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</li>
  <li>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</li>
</ul>

<button id="button">Sort by Title</button>

＆＃13;

Answer 2

旧订单需要保存在某个地方才能回来

你可以用这个

jquery sort list based on data attribute value

并添加一个布尔标志以切换按钮单击时使用的功能，按字母顺序设置并切换标志，或使用数据位置进行排序并切换标志

Answer 3

没有＆＃34;默认＆＃34;。元素排序后，它们现在处于新状态。你不能回去＃34;而是需要将它们重新排序到某个新状态。

那个新州是什么？给定任何其他类型的元素，您将如何定义所需的排序？

例如，您可以为它们提供一些数据属性。像这样：

<ul id="test">
    <li data-sortDefault="0">Sem lacinia quam venenatis vestibulum.</li>
    <li data-sortDefault="1">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</li>
    <li data-sortDefault="2">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</li>
</ul>

然后，只要您对它们进行排序，您就可以根据默认值再次对它们进行排序。因此，您可以将当前排序状态存储在变量中，然后根据该变量的状态重新排序。类似的东西：

(function($) {
    var sorted = false;
    $(function() {
        $("button").click(function() {
            if (sorted) {
                // new logic to sort by data property
                // ...
            } else {
                // existing logic to sort alphabetically
                $("li", "#test").sort(function(a, b) {
                    return $(a).text() > $(b).text();
                }).appendTo("#test");
                $("button").text("Sort by Default");
            }
            sorted = !sorted;
        });
    });
})(jQuery);

为了按data属性排序，我怀疑逻辑非常相似。就在我的头顶，它可能看起来像这样：

$("li", "#test").sort(function(a, b) {
    return $(a).data('sortDefault') > $(b).data('sortDefault'); // check data instead of text
}).appendTo("#test");
$("button").text("Sort");

您可以重新考虑一下以使其更清晰，包括可能利用toggle()函数而不是.click()。但这个想法应该是一样的。没有＆＃34;默认＆＃34;，您只需要能够定义元素的排序方式。

Answer 4

这是一种方法......它将返回原始订单，因为它存储了它的副本。

    <HEAD>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    </HEAD>
    <BODY>
        <ul id="test">
        <li>Sem lacinia quam venenatis vestibulum.</li>
        <li>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</li>
        <li>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</li>
    </ul>

    <button id="button">Sort by Title</button>

    </BODY>

    <SCRIPT>
        let clickToggle = true;
        let original = $("#test").html(); // copy original state.
        //alert(original);
    (function($) {
        $(function() {
            $("button").click(function() {
                if(clickToggle){
                    $("li", "#test").sort(function(a, b) {
                        return $(a).text() > $(b).text();
                    }).appendTo("#test");
                    $("button").text("Sort by Default");
                    clickToggle = false;
                }
                else{
                    $("#test").html(original);
                    clickToggle = true;
                }
            });
        });
    })(jQuery);
    </SCRIPT>

如何将按钮切换到默认列表？

4 个答案: