javascript - 如何将第二次点击添加到按钮纯javascript

Question

谁能告诉我如何向按钮添加另一次点击以将元素从 5 排序到 0？

第一次点击:从0到5排序 第二次点击:从 5 到 0 排序 第三次点击:从0到5排序 第四次单击从 5 到 0 排序 等等等等

var card = document.querySelectorAll('.card');
var btn = document.querySelector('.btn')
var container = document.querySelector(".container");


function getPrice(node) {
  return node.getAttribute('data-price');
}

function compareCards(a, b) {
  return getPrice(a) > getPrice(b);
}

function append(node) {
  container.appendChild(node);
}

btn.addEventListener('click', function(){
  container.innerHTML = ''; [...card].sort(compareCards).forEach(append);
});

body{
  display:flex;
  justify-content:center;
  flex-wrap: wrap;
}
.container{
  width: 100%;
  display: flex;
  justify-content: center;
}

.card{
  width: 100px;
  height: 100px;
  float: left;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  font-size: 2em;
  color: #fff;
  text-shadow: 2px 2px 4px #000;
}

.red{
  background: red;
}

.blue{
  background: blue;
}

.pink{
  background: pink;
}

.green{
  background: green;
}

.purple{
  background: purple;
}

.yellow{
  background: yellow;
}

<div class="container">
  <div class="card purple" data-price=4>4</div>
  <div class="card pink" data-price=2>2</div>
  <div class="card red" data-price=0>0</div>
  <div class="card green" data-price=3>3</div>
  <div class="card yellow" data-price=5>5</div>
  <div class="card blue" data-price=1>1</div>
</div>

<button class="btn">click to sort</button>

Answer 1

您可以使用变量来跟踪按钮状态(此处为 ascOrder) 并使用 Array#reverse() 一半的时间:

var card = document.querySelectorAll('.card');
var btn = document.querySelector('.btn')
var container = document.querySelector(".container");
var ascOrder = true;

function getPrice(node) {
  return node.getAttribute('data-price');
}

function compareCards(a, b) {
  return getPrice(a) > getPrice(b);
}

function append(node) {
  container.appendChild(node);
}

btn.addEventListener('click', function(){
  if(ascOrder){
    ascOrder = false;
    container.innerHTML = ''; [...card].sort(compareCards).forEach(append);
  }else{
    ascOrder = true;
    container.innerHTML = ''; [...card].sort(compareCards).reverse().forEach(append);
  }
  
});

body{
  display:flex;
  justify-content:center;
  flex-wrap: wrap;
}
.container{
  width: 100%;
  display: flex;
  justify-content: center;
}

.card{
  width: 100px;
  height: 100px;
  float: left;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  font-size: 2em;
  color: #fff;
  text-shadow: 2px 2px 4px #000;
}

.red{
  background: red;
}

.blue{
  background: blue;
}

.pink{
  background: pink;
}

.green{
  background: green;
}

.purple{
  background: purple;
}

.yellow{
  background: yellow;
}

<div class="container">
  <div class="card purple" data-price=4>4</div>
  <div class="card pink" data-price=2>2</div>
  <div class="card red" data-price=0>0</div>
  <div class="card green" data-price=3>3</div>
  <div class="card yellow" data-price=5>5</div>
  <div class="card blue" data-price=1>1</div>
</div>

<button class="btn">click to sort</button>