如何实现点击同一按钮可切换数组升序/降序排序的功能

问题根源 #

你当前的写法是在第一次点击的回调函数内又绑定了一次click事件，第二次点击后会出现多层事件绑定冲突，因此只能正常生效前两次。

修复方案 #

在click事件外部定义一个状态变量记录当前排序方向，每次点击翻转状态，根据状态执行对应排序逻辑即可实现无限切换，修改后的代码如下：

// 外部定义状态变量，记录当前是否为降序排序
let isDescSort = false;

$(".lower").click(() => {
  // 每次点击翻转排序状态
  isDescSort = !isDescSort;
  if (isDescSort) {
    // 降序逻辑：数值从大到小
    colorsValueMenu("highest", "spot", "gainers", "losers", "lower")
    arrayCoinsD.sort(function (a, b) { 
      return b.quote.USD.percent_change_24h - a.quote.USD.percent_change_24h 
    })
  } else {
    // 升序逻辑：数值从小到大
    colorsValueMenu("lower", "spot", "gainers", "losers", "highest")
    arrayCoinsD.sort(function (a, b) { 
      return a.quote.USD.percent_change_24h - b.quote.USD.percent_change_24h 
    })
  }
  createCoinDiv(arrayCoinsD, arrayCoinsI)
})

补充说明：Array.sort() 会直接修改原数组，你之前代码中把排序结果赋值给highest/lower变量的操作是非必需的，如果没有额外保留两份排序后副本的需求可以直接省略。

内容的提问来源于stack exchange，提问作者user17302724