javascript with for loop для пометки текста в форме textarea

Question

У меня есть javascript, который будет использоваться для тега текста в текстовом поле, когда пользователь нажимает кнопку. Прямо сейчас я только заработал на одну кнопку. Есть 8 кнопок, которые должны иметь возможность отмечать в целом, но я не хочу повторять один и тот же код снова и снова для каждого идентификатора кнопки, поэтому я попробовал цикл for, но это не сработало. Я не совсем уверен, почему.

Эти кнопки идентификаторами: редактировать-button0, редактировать-Button1, редактировать-Button2, ..., редактировать-Button8

Я добавил предупреждение в цикл, чтобы проверить идентификатор кнопки.

Независимо от того, какую кнопку я нажимаю позже, он говорит, что кнопка id является кнопкой edit8, и она добавляет тег, связанный с этой кнопкой.

Любые идеи, почему это не работает или как я должен это делать.

/*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, а затем использовать .each() в JQuery Переберите над ними, как этот

$('.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 -

В качестве альтернативы и помочь в в будущем, я думаю, что проблема с вашим кодом была вашей петлей. Посмотрите на this Пример jsFiddle, чтобы показать, как должен выглядеть цикл.