參考當前上下文設置的jQuery插件選項時，

Question

可以說我有以下的jQuery插件（這僅僅是一個例子來演示點）：

(function ($) { 
    $.fn.colourise = function (options) { 
     var settings = $.extend({ 
      color: "black" 
     }, options); 

     return this.each(function() { 
      $(this).css("color", options.color); 
     }); 
    }; 
})(jQuery); 

，我想申請到下面的標記：

<div data-color="red"> 
    This text should be red.  
</div> 
<div data-color="blue"> 
    This text should be blue 
</div> 
<div data-color="green"> 
    This text should be green 
</div> 

如果我想作爲插件的選項之一傳遞的值取決於元素，我該如何應用它？目前，我只能通過這樣做來獲得這個工作：

$(function() { 
    // This feels a bit wrong to have to use a .each() here, but how else do we do it? 
    $("div").each(function() { 
     $(this).colourise({ 
      color: $(this).data("color") 
     }); 
    }); 
}); 

即，通過使用.each（）方法遍歷每個元素並將插件分別應用於每個元素（這使得插件內的this.each（）有點多餘）。感覺就像我應該可以這樣做：

$(function() { 
    $("div").colourise({ 
     color: [get context of this "div" somehow].data("color") 
    }); 
}); 

但我不能在這裏使用$（this）或this，因爲它們引用文檔。

對不起，缺少http://jsfiddle.net/，但該網站目前對我來說確實很慢，他們一定會遇到一些問題。

Answer 1

.each正是你所需要的。

當您在沒有.each回調的多元素集上調用該方法時，您正在爲該集中的每個元素創建一個在插件中使用的單個選項對象。

如果不爲每個元素設置單獨的對象，則無法對每個元素進行更改。

Answer 2

做一個回調來檢索顏色像這樣

function getColor(){ 
return $.data(this, "color"); 
} 

Colourise有回調的選項

$(function() { 
    $("div").colourise({ 
    color: getColor 
    }); 
}); 

檢查顏色的選擇是一個可調用的函數

(function ($) { 
    $.fn.colourise = function (options) { 
    var settings = $.extend({ 
     color: "black" 
    }, options); 

    return this.each(function() { 
    var color = options.color; 

    color = typeof color =="function" ? color.call(this) : color; 
     $(this).css("color", color); 
    }); 
    }; 
})(jQuery);