Question

我有一个javascript，用于在用户点击按钮时标记文本区域中的文本。现在我只让它工作一个按钮。有8个按钮需要能够总共标记，但我不想为每个按钮ID反复重复相同的代码，所以我尝试了for循环，但这不起作用。我不太确定为什么。

这些是按钮ID：edit-button0，edit-button1，edit-button2，...，edit-button8

我在for循环中添加了一个警告来检查按钮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，然后在jQuery中使用.each()来像这样循环它们

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

     });
});

编辑 -

作为替代方案并在将来提供帮助，我认为您的代码问题是您的for循环。看看this jsFiddle示例，以显示循环应该如何显示。

带有for循环的javascript，用于标记文本textarea中的文本

1 个答案: