Question

运行以下命令会返回2个调用，但第一个调用在console.log上有两个BOTH画布项。

1）为什么会发生这种情况 2）我该如何阻止它！

$.fn.DonutIt = function( options ){
    var settings = $.extend({
        color: "#600", 
        bgColor: "#000", 
        percentage: 50, 
        fontColor: "#000", 
        fontSize: "14px", 
        fontFamily: "Arial, Helvetica, sans-serif"
    }, options );

    var canvas = this;
    console.log(canvas);
};

}( jQuery));
window.onload = function(){
    $("canvas").DonutIt({percentage: 99.5});    
$("donutOTIF").DonutIt({percentage: 50});   
};

<canvas id="canvas" width="100" height="100">
<canvas id="donutOTIF" width="100" height="100">

Answer 1

$()使用CSS选择器。 $("#someID")将选择someID的元素，而$("canvas")将选择所有画布元素。

JS

$.fn.DonutIt = function(options){
    var settings = $.extend({
        color: "#600", 
        bgColor: "#000", 
        percentage: 50, 
        fontColor: "#000", 
        fontSize: "14px", 
        fontFamily: "Arial, Helvetica, sans-serif"
    }, options);
    var canvas = this;
    console.log(canvas);
};

$.ready(function(){
    $("#canvas").DonutIt({percentage: 99.5});    
    $("#donutOTIF").DonutIt({percentage: 50});   
});

HTML

<canvas id="canvas" width="100" height="100"></canvas>
<canvas id="donutOTIF" width="100" height="100"></canvas>

而且仅供参考，<canvas>不是自动关闭标记也不是它不需要结束标记。

Answer 2

$("canvas")选择canvas标记名称的所有元素。Read more...

另外
要extend jquery functions，您应该使用jQuery.fn.extend。

jQuery.fn.extend()方法扩展了jQuery原型 ($.fn)提供可以链接到的新方法 jQuery()功能。

return this.each可帮助您合并命令，您可以通过一个选择调用更多功能。

jQuery.fn.extend({
    DonutIt: function (options) {
        return this.each(function () {
            var defaults = {
                color: "#600",
                bgColor: "#000",
                percentage: 50,
                fontColor: "#000",
                fontSize: "14px",
                fontFamily: "Arial, Helvetica, sans-serif"
            };
            var settings = $.extend({}, defaults, options);
            var canvas = this;
            console.log(canvas);
            console.log(settings.percentage);
        });
    }
});
//canvas and donutOTIF get percentage=99.5
$("#canvas,#donutOTIF").DonutIt({
    percentage: 99.5
});
//donutOTIF get percentage=50
$("#donutOTIF").DonutIt({
    percentage: 50
});

jQuery Canvas出乎意料的结果

2 个答案:

JS

HTML

DEMO