0

チェックボックスをcssスタイルのdivでラップし、実際のチェックボックスを非表示にする非常に粗雑なjQueryプラグインがあります。入力要素でプラグインを実行しますが、入力要素が非表示であるため、連鎖のためにプラグインがラッピング div を返すようにします。

(function ($) {

var methods = {       

    'init': function (options) {

        var settings = $.extend({
            'location' : 'top',
            'background-color' : 'blue'
        }, options);            

        return this.each(function () {  
            var $this = $(this);
            var checked = $this.attr('checked') || '';
            $this.wrap('<div class="styled-checkboxes ' + checked + '"></div>');
            return $(this).parent('.styled-checkboxes')[0];
        });
    }           
};

$.fn.styledCheckboxes = function (method) {

    if (methods.method) {
        //
    } else if (typeof options === 'object') {
        return methods.init.apply(this, options);
    } else {
        console.log('init without options');
        return methods.init.apply(this, null);
    }        
}
})(jQuery);

プラグインを次のように呼び出すと: 

console.log(
    $('input[type="checkbox"]').styledCheckboxes().after('<p>hello world</p>')
);

追加された p は、div ではなくチェックボックスの後に追加されます。コンソール トレースは、入力をラップする div ではなく、ページにあった入力項目を含む jQuery の選択です。なぜラインなのか

return $(this).parent('.styled-checkboxes')[0];

連鎖に使用されるオブジェクトとして div を返さないのですか?

4

1 に答える 1

2

その理由は、内部で何かを返してもeach、返されたオブジェクトがオーバーライドされないためです... からの戻り値eachは常にコレクション自体です。

の結果を返すことができ、リスト内のすべてのアイテムを引き続き列挙するthis.mapため、期待どおりに機能しmap、返されたアイテムを操作できます。

return this.map(function () {  
        var $this = $(this);
        var checked = $this.attr('checked') || '';
        $this.wrap('<div class="styled-checkboxes ' + checked + '"></div>');
        return $(this).parent('.styled-checkboxes')[0];
    });

実際の例: http://jsfiddle.net/wBUzP/ (「hello world」は新しく追加された の外側にありますdiv)

于 2012-09-19T09:49:19.877 に答える