TinySort不按正确的属性排序

Question

我有一个ul和il's，我想按一下按钮来排序。我有两个按钮。一个按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'
      });
    }   
}