jQuery – 如何在 plugin 套件中,呼叫 callback 時可以使用 $(this)

製作外掛套件 (plugin) 的時候,如果我們想要將 $(this) 等同於 $(“.item”) ,方便在 callback 的時候可以直接使用 $(this) ,該怎麼設計?這小問題困擾了我一些時間,後來才發現原來這麼簡單XD

$(".item").myplugin(function (){
   var text = $(this).text(); //Hello World!
})

 

直接看這兩種寫法,就會知道怎麼設計了喔

Plugin

(function ( $ ) {

    $.fn.myPlugin = function (callback){
        callback(this); //只是將 this 放到夾帶的參數
    }

    $.fn.myPlugin2 = function (callback){
        callback.call(this); //將 this 指定到 callback
    }


}( jQuery ));

關鍵的地方就在於 plugin 呼叫 callback 的時候,不要直接使用 callback(this) 而是使用 callback.call(this)。我們看看使用的範例:

Html

<a href="" class="item">最新消息</a>

jQuery

$(function (){
    $(".item").myPlugin(function (obj){
        console.log($(obj)); // [a.item]
        console.log($(this)); // [Window]
        // console.log($(this).html()); // Error
    })

    $(".item").myPlugin2(function (obj){
        console.log($(obj)); // r.fn.init {}
        console.log($(this)); // [a.item]
        console.log($(this).html()); // 最新消息
    })
})

myPlugin2 中看到,直接用 $(this).html() 就能撈出我們要的資料囉!

線上玩玩看

發表迴響