[英]how to add second click to the button plain javascript
Can anyone tell me how to add another click to the button to sort the elements from 5 to 0? 谁能告诉我如何在按钮上再单击一次以将元素从5排序到0?
first click: sort from 0 to 5 second click: sort from 5 to 0 third click: sort from 0 to 5 fourth click sort from 5 to 0 etc etc 第一次点击:从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>
You could keep trace of your button state with a variable (Here ascOrder
) and use Array#reverse()
half of the times : 您可以使用变量(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>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.