Question

刚为textarea制作了我自己的bbcodes插件但我无法纠正错误..

如果页面使用2个textareas，则在第1个中，一个动作被公开两次如果页面使用1 textarea，一切正常。

如何解决？

代码：

/*
 * plugin: bbcodes based on jquery.bbcode.js
 * version: 0.2
 *
 * author: atomos
 * site: http://light-engine.ru
 */

(function($){
    $.fn.bbcode = function(options){
        var options = $.extend({
            tag_bold: true,
            tag_italic: true,
            tag_right: true,
            tag_center: true,
            tag_left: true,
            tag_link: true,
            tag_image: true,
            image_url: 'bbimage/'
        }, options||{});

        var taid = $(this).attr('name');
        var text = '<div class="btn-group">';

        if(options.tag_bold)
        {
            text = text + '<a class="btn" title="Жирный" href="#" id="b"><i class="icon-bold"></i></a>';
        }

        if(options.tag_italic)
        {
            text = text + '<a class="btn" title="Курсив" href="#" id="i"><i class="icon-italic"></i></a>';
        }

        text = text + '</div><div class="btn-group">';

        if(options.tag_right)
        {
            text = text + '<a class="btn" title="Направо" href="#" id="right"><i class="icon-align-right"></i></a>';
        }

        if(options.tag_center)
        {
            text = text + '<a class="btn" title="Центр" href="#" id="center"><i class="icon-align-center"></i></a>';
        }

        if(options.tag_left)
        {
            text = text + '<a class="btn" title="Налево" href="#" id="left"><i class="icon-align-left"></i></a>';
        }

        text = text + '</div><div class="btn-group">';

        if(options.tag_link)
        {
            text = text + '<a class="btn" title="Ссылка" href="#" id="url"><i class="icon-share-alt"></i></a>';
        }

        if(options.tag_image)
        {
            text = text + '<a class="btn" title="Изображение" href="#" id="img"><i class="icon-picture"></i></a>';
        }

        text = text + '</div>';

        $(this).wrap('<div id="bbcode-' + taid + '"></div>');
        $('#bbcode-' + taid).prepend('<div class="btn-toolbar">' + text + '</div>');

        $('.controls a[class=btn]').click(function()
        {
            var id = $(this).parent('.btn-group').parent('.btn-toolbar').parent().attr('id');
            var area = $('textarea[name=' + id.substring(7) + ']').get(0);

            var button_id = $(this).attr('id');
            var param = '';

            var start = '[' + button_id + ']';
            var end = '[/' + button_id + ']';

            if (button_id == 'img')
            {
                param = prompt('Введите адрес картинки:', 'http://');

                if (param && param != 'http://') start += param;
                else return false;
            }
            else if (button_id == 'url')
            {
                param = prompt('Введите адрес ссылки:', 'http://');

                if (param && param != 'http://') start = '[url href=' + param + ']';
                else return false;
            }

            insert(start, end, area);
            return false;
        });
    }

    function insert(start, end, element)
    {
        if (document.selection)
        {
            element.focus();

            sel = document.selection.createRange();
            sel.text = start + sel.text + end;
        }
        else if (element.selectionStart || element.selectionStart == '0')
        {
            element.focus();

            var startPos = element.selectionStart;
            var endPos = element.selectionEnd;

            element.value = element.value.substring(0, startPos) + start + element.value.substring(startPos, endPos) + end + element.value.substring(endPos, element.value.length);
        }
        else
        {
            element.value += start + end;
        }
    }

})(jQuery);

我有演示：here

Answer 1

你的问题是：

$(document).ready(function(){
    $('textarea').each(function() {
        $(this).bbcode();
    });
});

这意味着您的脚本将通过页面上的每个textareas并在其上运行bbcode（）函数。
出于某种原因，它通过第一个textarea迭代次数与页面上的textareas一样多次因此，如果您有2个区域，则第一个区域的功能将在第二个区域执行2次如果你有3个区域，功能将首先执行3次，第二次执行2次，最后一次执行1次等等...

我建议大量调整你的脚本，这样你就可以在bbcode按钮的osme上执行onclick事件时转发你想要操作的特定文本区域的ID参数，如：

<textarea class="input-xxlarge" id="area_1" rows="3"></textarea>

<a onclick="$('#area_1').bbcode();" class="btn" title="Жирный" href="#" id="b"><i class="icon-bold"></i></a>

这只是一个方向，你应该去哪个方向...而且还考虑不用jquery做它而不是在纯JS中做它更清洁，最后你会知道你的代码的每一点。因此，未来维护脚本将是快速而简单的。

js bb代码重复动作错误

1 个答案: