JS代碼BB行動dublicate錯誤

Question

只是做我自己bbcodes插件的textarea的 但我wasn`t能夠糾正錯誤..

如果該頁面使用2個文字區域，在第一次一個動作dublicated兩次。
如果頁面使用1個文本區域，則一切正常。

你能幫我解決嗎？

代碼：

/* 
* 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(); 
    }); 
}); 

這意味着，你的腳本將槽每個頁面上的文本域和運行的bbcode （）函數。
由於某些原因，它會迭代通過第一個textarea的次數，因爲頁面上有textareas。
所以如果你有2個區域的功能將在第一區域執行2次，第二區域的時間是1次。
如果您有3個區域，函數將首先執行3次，秒執行2次，最後執行1次。
等等...

我會建議大力調整你的腳本，以便您可以轉發你願意，當你像設置高亮按鈕osme做一個onclick事件來處理特定的textarea的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它是更清潔和最終你就會知道你的代碼的每一位。因此，未來腳本的維護將會快速而簡單。