如何將第二次單擊添加到按鈕純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

您可以使用變量（Here 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> 

Answer 2

• 使用變量更改排序方向。
• 根據該標志，對數組進行排序。

查看此代碼段。

 var card = document.querySelectorAll('.card'); var btn = document.querySelector('.btn') var container = document.querySelector(".container"); var asc = false; function getPrice(node) { return node.getAttribute('data-price'); } function compareCards(a, b, asc) { if (asc) { return getPrice(a) > getPrice(b); } return getPrice(a) < getPrice(b); } function append(node) { container.appendChild(node); } btn.addEventListener('click', function(){ asc = !asc; container.innerHTML = ''; [...card].sort(function(a, b) { return compareCards(a, b, asc); }).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>