電商網站之“全選功能”

前端小鐵人發表於2019-10-15
網站

#設計的知識點：

1.事件代理.(由於我們的購物車資訊是動態生成的，所以我們只能指定動態生成)
【首先我們要明確的是此處的頁面結構的是table>thead>tbody】
我們的資訊將放在tbody中。
let tbody = document.querySelector('tbody');
tbody.onchange = function(evt) {
    //判斷事件代理的目標元素
    if(evt.target.tagName === "INPUT") {
    //我們來判斷目標元素的選中狀態，checked的狀態用true與false來判斷。【我們不能通過getAttribute來取得選中狀態】
    
    
        if(evt.target.checked === true) {
            evt.target.parentNode.parentNode.classList.add('selected');
        }else{
            evt.target.parentNode.parentNode.classList.remove('selected');
        }
        //判斷是否改變全選按鈕的狀態：
        //選中的checkbox === 全部的CheckBox,此時要全部選中
        var allCheckboxCount = document.querySeletcorAll('tbody input[type=checkbox]').length;
        //取到被選中的checkbox的數量
        var checkedCount = document.querySelectorAll('tbody input[type=checkbox]:checked').length;
        
        document.querySelector('thead input[type=checked]') = allCheckboxCount === checkedCount;
    }
}

//上述程式碼中，我們一般運用到的內容是事件代理，然後進行必要的事件代理判斷。應注意的是checkbox的狀態我們只能通過布林值來進行判斷，而不能通過getAttribute來獲取。通過判斷true與false來新增類。
複製程式碼

document.querySelector('thead input[type=checkbox]').onchange = function (evt) { var status = this.checked; //this在各種情況下的指向，也是我們必須要熟知的重點，一般的，在事件中，this的指向就是on前面的元素。this的指向問題，著實讓我覺得有點事件“肇事者”的意思。 var all = document.querySelectorAll('tbody input[type=checked]'); all.forEach(checkbox => { //箭頭函式是ES6獨有的特性，複雜的箭頭函式也極會容易引起我們的不適，但是整它的辦法還是有的，有一種轉碼器叫做Babel，通常我們用它來ES6中的箭頭函式轉換到ES5中的普通函式。【它用來處理相容性的問題】 //有關forEach的遍歷問題，與其它者的不同之處，也將在最近發表文章進行說明。 checkbox.checked = status; status? checkbox.parentNode.parentNode.classList.add('selected'): checkbox.parentNode.aprentNode.classList.remove('selected'); //三目運算子【我經常取名叫做三木童子^_^】，在js原生中，我們也常用來處理相容性的問題。 }) }

相關文章