Question

我有一个il，我想按一下按钮进行排序。我为此有两个按钮。一种按attr：id排序，另一种按attr：name排序。

这有效！太好了！

ul将被清除并从其他脚本附加。此操作每30秒完成一次，并且需要更新数据。

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

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

我该怎么做才能纠正这种行为？

这有效并且看起来像这样；

<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'
      });
    }   
}

TinySort无法按正确的属性排序

1 个答案: