Question

到目前为止，我编写了一个看起来像这样的插件：

(function($) {

    var textarea;

    $.fn.bbcode = function(opt) 
    {
        var i = 0;

        return this.each(function(i) {

            textarea = this;

            var strHTML = '<div id="editor" class="editor-instance-' + i + '">';
            strHTML += '<div class="btn bold" title="Bold"></div>';
            strHTML += '<div class="btn italic" title="Italic"></div>';
            strHTML += '<div class="btn underline" title="Underline"></div>';
            strHTML += '<div class="btn link" title="Link"></div>';
            strHTML += '<div class="btn quote" title="Quote"></div>';
            strHTML += '</div>';

            $(strHTML).prependTo($(this).parent().parent());

            $('div.editor-instance-' + i + ' div').live('click', function(){
                var type = $(this).attr('class').substr(4);

                switch (type) {
                    case 'bold':
                        simpleReplace('b');
                        break;
                }
            });

        });
    };


    function simpleReplace(wrapper) {
        $(textarea).val(wrapper);
    }

})(jQuery);

我在2 textarea上调用这个插件是这样的：

$(document).ready(function(){
    $('.form_add_comment textarea, .form_reply_comment textarea').bbcode({
        start: true
    });

});

我遇到的问题是点击粗体调用simpleReplace()只是将第二个textarea的值设置为'b'，尽管我点击了第一个。

我认为textarea变量在第二次循环时被覆盖，所以我的函数可能在错误的地方。

任何帮助都会很棒！

Answer 1

你是对的，textarea被覆盖了。解决方案是将当前textarea传递给函数：

$('div.editor-instance-' + i + ' div').live('click', {textarea: this}, function(e){
     var type = $(this).attr('class').substr(4);

     switch (type) {
         case 'bold':
            simpleReplace(e.data.textarea, 'b');
            break;
     }
});

请注意，当前textarea通过事件数据选项传递给事件处理程序。

然后：

function simpleReplace(element, wrapper) {
    $(element).val(wrapper);
}

当然你也可以将simpleReplace函数放在for循环中。这样，每个textarea都获得了“自己的”simpleReplace函数。但这也会增加内存占用量。

jQuery自带的插件帮助 - 引用错误的元素

1 个答案: