刪繁就簡，jquery的快捷程式設計

coldday發表於2019-03-15
jQuery程式設計

用簡單案例說話

在日常生活中，製作一個切換item的active屬性的items塊是一個非常常見的小案例，廣泛應用於諸多行業，今天我們從這樣一個簡單的案例來學習jquery是怎樣替代js去達到快捷程式設計的。

案例檢視

刪繁就簡，jquery的快捷程式設計
vip套餐案例
在這個案例中，共有三個代表不同期限的vip套餐item，點選item後使item處於啟用狀態，啟用效果為改變邊框樣式，同時還需要保證選擇其他套餐，之前處於啟用狀態的item 會失效。

刪繁就簡，jquery的快捷程式設計
啟用狀態

刪繁就簡，jquery的快捷程式設計
啟用切換

原生js解決方案

我們先考慮如何用原生Js完成這個案例，將實現過程的思路調理清晰，再使用jquery改寫指令碼。思路如下：
獲取item陣列，對item陣列進行迴圈操作，在每次迴圈中對對應下標i的item元素進行事件監聽，發生滑鼠點選事件後，再次對整個item陣列進行迴圈操作，將所有item移除active類名，再將this指標指向的被滑鼠點選的元素，增加一個active類名。

程式碼實現

        var oType = document.querySelectorAll('.item-price');
             for (let i = 0; i < oType.length; i++) {
                oType[i].addEventListener('click', function(){
                for (let j of oType) {
                  j.classList.remove('active');
                }
                  this.classList.add('active');
              })
            }
複製程式碼

jquery解決方案

在原生js方案中，需要使用巢狀迴圈去實現這樣一個案例，看上去十分繁瑣。使用jquery則非常快捷簡便，思路如下:
使用類名選擇器獲取item，新增click事件，對使用類名選擇器的元素新增過濾器，過濾得到已有active類名的item，移除其active類名，使用jquery物件$(this)，新增active類名開關。

程式碼實現

        $(".item-price").click(function(){
            $(".item-price").filter(".on").removeClass("on");
            $(this).toggleClass("on");
    })
複製程式碼

比較之下，使用jquery實現是不是非常清爽，快捷有力呢。

相關文章