如何在按钮中的向下箭头和向上箭头之间切换？答案

【问题标题】：How can I change between arrow down and arrow up in a button?如何在按钮中的向下箭头和向上箭头之间切换？
【发布时间】：2018-12-18 07:57:00
【问题描述】：

如何在按钮中显示向上箭头符号？分别地，我希望它在单击向下箭头时改变。我该怎么做？？

我试过了，但是....

<button onclick="sortTable(1)" id="up_down" type="button" class="button button2">Sort table<i class="fa fa-fw fa-sort-asc"></i></button>

【问题讨论】：

你能告诉我们你的sortTable函数吗？
为什么相关？我只需要一个按钮，当我按下它时会改变箭头。排序工作，但按钮在表格之外。
因为我们可能会将其包含在 sortTable 中。
而不是创建多个函数 - 您不妨在 sortTable 中切换它
所有你需要做的是toggleClass你的字体真棒，如果你有jQuery

标签： javascript html button arrows

【解决方案1】：

我正在使用最新的字体真棒文档，我看不到fa-sort-asc，所以我改用fa-sort-up。

function sortTable() {
  const ascending = false; // change the value to your sorting method to check if it's ascending or descending.
  const i = document.getElementById("up_down").getElementsByTagName("i")[0]
  i.classList.remove("fa-sort-up", "fa-sort-down");
  if (ascending) {
    i.classList.add('fa-sort-up');
    return;
  }

  i.classList.add('fa-sort-down');
}

小提琴：https://jsfiddle.net/k6bxyps3/

【讨论】：