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

时间:2018-12-18 07:57:00

标签: javascript html button arrows

如何在按钮中显示向上箭头符号?我想分别单击以向下箭头更改它。我该怎么办?

我尝试过但是....

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

1 个答案:

答案 0 :(得分:0)

我正在使用最新的超棒字体文档,看不到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/