js案例整理--取消選中 classList
阿新 • • 發佈：2021-01-26
技術標籤：筆記javascript
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .wrapper { padding: 20px; width: 800px; text-align: center; border: 2px solid #999; } .wrapper .item { display: inline-block; margin: 20px; box-sizing: border-box; padding: 10px; width: 120px; height: 120px; border: 2px solid #ccc; transition: 1s; } .wrapper .item.active { color: #fff; border-color: red; background-color: #333; } </style> </head> <body> <div class="wrapper"> <div class="item">100</div> <div class="item">200</div> <div class="item">300</div> <div class="item">400</div> <div class="item">500</div> <div class="item">600</div> <div class="item">700</div> </div> <script> (function(){ // 獲取所有 item 的集合 var itemNodes = document.querySelectorAll('.wrapper .item'); // 遍歷 itemNodes.forEach(function(item){ // 給每個 item 新增 單擊事件 item.onclick = function(){ // 判斷 item 是否是選中狀態 /* if (item.classList.length > 1) { // 取消選中的狀態 item.classList.remove('active'); } else { // 設定為選中狀態 item.classList.add('active'); } */ item.classList.toggle('active'); } }); })() </script> </body> </html>