TinySort 没有按正确的属性排序

Question

我有一个带有 il 的 ul，我想按一下按钮进行排序。我有两个按钮。一个按 attr:id 排序，一个按 attr:name 排序。

这行得通！太好了！

ul 将从不同的脚本中清除并附加。这是每 30 秒完成一次，是更新数据所必需的。

为了保持选择的排序方法，当单击其中一个按钮时，我将值设置为 0 或 1。

问题是，在附加 ul 并运行函数以按请求的顺序对列表进行排序后，列表将按 attr:name 排序，而它应该是 attr:id。

我需要做什么来纠正这种行为？

这有效，看起来像这样；

<ul class="list-group" id="standstill">
    <li class="list-group-item" id="141" name="4"></li>   
    <li class="list-group-item" id="145" name="5"></li>  
    <li class="list-group-item" id="45" name="6"></li>  
    <li class="list-group-item" id="231" name="4"></li>  
    <li class="list-group-item" id="1441" name="4"></li>  
    <li class="list-group-item" id="841" name="3"></li>  
</ul>

按钮是这样的；

<button id='toggle_standstill_time' onclick="toggleSort_standstill_time()"></button>
<button id='toggle_standstill_prio' onclick="toggleSort_standstill_prio()"></button>

触发排序的脚本是这样的；

  function toggleSort_standstill_time() {
    var btn = document.querySelector('#toggle_standstill_time');
    if (btn.classList.toggle('desc')) {
      tinysort('ul#standstill>li', {
        order: 'desc',
        attr: 'id'
      });
    btn_standstill_time = 1;
    } else {
      tinysort('ul#standstill>li', {
        order: 'asc',
        attr: 'id'
      });
    btn_standstill_time = 0;
    }
  }
  function toggleSort_standstill_prio() {
    var btn = document.querySelector('#toggle_standstill_prio');
    if (btn.classList.toggle('desc')) {
      tinysort('ul#standstill>li', {
        order: 'desc',
        attr: 'name'
      });
    btn_standstill_prio = 1;
    } else {
      tinysort('ul#standstill>li', {
        order: 'asc',
        attr: 'name'
      });
    btn_standstill_prio = 0;
    }
  }

以及在定时刷新数据后对列表进行排序的功能；

function orderlist(){
    if(btn_standstill_time == 1){
      tinysort('ul#standstill>li', {
        order: 'desc',
        attr: 'id'
      });
    }
    else{
      tinysort('ul#standstill>li', {
        order: 'asc',
        attr: 'id'
      });
    }
    if(btn_standstill_prio == 1){
      tinysort('ul#standstill>li', {
        order: 'desc',
        attr: 'name'
      });
    }
    else{
      tinysort('ul#standstill>li', {
        order: 'asc',
        attr: 'name'
      });
    }   
}

我得到的结果

btn_standstill_time = 1

刷新后是这样的；

<ul class="list-group" id="standstill"> 
    <li class="list-group-item" id="841" name="3"></li> 
    <li class="list-group-item" id="141" name="4"></li> 
    <li class="list-group-item" id="231" name="4"></li>  
    <li class="list-group-item" id="1441" name="4"></li>  
    <li class="list-group-item" id="145" name="5"></li>  
    <li class="list-group-item" id="45" name="6"></li>    
</ul>

我期待的地方

btn_standstill_time = 1

得到；

<ul class="list-group" id="standstill"> 
    <li class="list-group-item" id="45" name="6"></li> 
    <li class="list-group-item" id="141" name="4"></li> 
    <li class="list-group-item" id="145" name="5"></li> 
    <li class="list-group-item" id="231" name="4"></li> 
    <li class="list-group-item" id="841" name="3"></li>   
    <li class="list-group-item" id="1441" name="4"></li>     
</ul>

我会感谢提供的任何帮助！

最好的问候，

路德

Answer 1

如果发现错误。我对各种按钮状态使用了 if/else 语句。我将其更改为每个状态的 if 语句（在 0 和 1 之间切换）并将运算符 == 更改为 ===，现在它可以工作了。

使用以下解决方案；

function orderlist(){
    if(btn_standstill_time === 1){
      tinysort('ul#standstill>li', {
        order: 'desc',
        attr: 'id'
      });
    }
    if(btn_standstill_time === 0){
      tinysort('ul#standstill>li', {
        order: 'asc',
        attr: 'id'
      });
    }
    if(btn_standstill_prio === 1){
      tinysort('ul#standstill>li', {
        order: 'desc',
        attr: 'name'
      });
    }
    if(btn_standstill_prio === 0){
      tinysort('ul#standstill>li', {
        order: 'asc',
        attr: 'name'
      });
    }   
}