フォームのテキストにタグを付けるためのforループ付きjavascript

Question

ユーザーがボタンをクリックしたときにテキストエリアのテキストにタグを付けるために使用するjavascriptがあります。今私はただ一つのボタンのために働くようになった。合計でタグ付けできる必要がある8つのボタンがありますが、各ボタンIDに対して同じコードを何度も繰り返したくないので、forループを試しましたが、これはうまくいきませんでした。私は確信していない理由は、しかし。編集button0、編集ボタン1、編集ボタン2、...、編集button8

私はループのボタンのIDを確認するには、アラートを追加しました：

これらは、ボタンIDです。

ボタンをクリックしても、ボタンIDはedit-button8であり、そのボタンに接続されているタグが追加されます。

これがなぜ機能しないのか、どうやったらそれをやるべきかについてのアイデア。

/*globals document*/ 
(function ($) { 
    "use strict"; 
    $(document).ready(function() { 

      for (i=0;i<8;i++) { 

       $("#edit-button"+i).click(function() { 
         alert("#edit-button"+i); 
         var tag = $("#edit-button"+i).attr("value"); 
         var id = "protocol"; /* id of textarea */ 

         var element = document.getElementById(id); /* HTML element object */ 
         var start = element.selectionStart;  /* start pos of selection */ 
         var end  = element.selectionEnd;  /* end pos of selection */ 
         var text  = element.value;   /* whole text */ 

         var prefix = text.substring(0, start); /* part before selection */ 
         var selected = text.substring(start, end); /* selected text */ 
         var suffix = text.substring(end);   /* part after selection */ 
         /* insert tags in selection */ 
         selected  = "["+tag+"]" + selected + "[/"+tag+"]"; 

         /* update HTML object */ 
         element.value  = prefix + selected + suffix; /* selected text */ 

         element.selectionStart = start;      /* new start pos */ 
         element.selectionEnd = start + selected.length; /* new end pos */ 


         return false; 
        }); 
      } 
    }); 
})(jQuery); 

Answer 1

あなたはすべてのボタンにクラス.tagButtonsを与え、その後、この

$('.tagButtons').each(function(){ 
    $(this).click(function(){ 


      var tag = $(this).attr("value"); 
      var id = "protocol"; /* id of textarea */ 

      var element = document.getElementById(id);       
      var start = element.selectionStart;  
      var end  = element.selectionEnd;  
      var text  = element.value;            
      var prefix = text.substring(0, start); 
      var selected = text.substring(start, end);        
      var suffix = text.substring(end);  
      selected  = "["+tag+"]" + selected + "[/"+tag+"]";              

      element.value  = prefix + selected + suffix; 

      element.selectionStart = start;         
      element.selectionEnd = start + selected.length;  

      return false; 

    }); 
}); 

EDITのようにそれらをループにjQueryので.each()を使用することができます - 別の方法として

とで支援します将来、あなたのコードの問題はあなたのforループだと思います。ループの外観を表示するには、this jsFiddleの例を見てください。