[英]javascript with for loop for tagging text in a form textarea
I have a javascript that is to be used to tag text in a textarea when a user clicks a button. 我有一个Javascript,当用户单击按钮时,该JavaScript将用于标记文本区域中的文本。 Right now I have only gotten it to work for one button. 现在,我只需要一个按钮就可以使用它。 There are 8 buttons that need to be able to tag in total but I don't want to repeat the same code over and over for each button id, so I tried a for loop but this didn't work. 总共有8个需要标记的按钮,但是我不想为每个按钮id重复一遍又一遍,因此我尝试了for循环,但这没有用。 I'm not quite sure why though. 我不太清楚为什么。
These are the button ids: edit-button0, edit-button1, edit-button2, ...,edit-button8 这些是按钮ID:edit-button0,edit-button1,edit-button2,...,edit-button8
I've added an alert in the for loop to check the button id. 我在for循环中添加了一个警报,以检查按钮ID。
No matter which button I click later it says button id is edit-button8, and it adds the tag connected to that button. 不管我以后单击哪个按钮,它都说按钮ID为edit-button8,并添加连接到该按钮的标签。
Any ideas why this doesn't work or how I should do it instead. 任何想法为什么这不起作用或我应该怎么做。
/*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);
You could give all the buttons a class .tagButtons
and then use .each()
in jQuery to loop over them like this 您可以为所有按钮提供一个.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;
});
});
EDIT - 编辑-
As an alternative and to help in the future, i think the issue with your code was your for loop. 作为一种替代方案,并且为了将来提供帮助,我认为您的代码问题是您的for循环。 Have a look at this jsFiddle example to show how the loop should look. 看一下这个 jsFiddle示例,以显示循环的外观。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.