在文本区域的每一行旁边显示一个标签

Question

我想要做的是在文本区域的每一行旁边放置标签，我必须每 5 行循环一次标签。

我正在尝试向用户 jQuery numberedTextarea Plugin 显示标签，而不是显示行号。我正在尝试使用此功能并在其中插入一个开关。

    function renderLineNumbers(element, settings) {
    element = $(element);

    var linesDiv = element.parent().find('.numberedtextarea-line-numbers');
    var count = element.val().split("\n").length;
    var paddingBottom = parseFloat(element.css('padding-bottom'));

    linesDiv.find('.numberedtextarea-number').remove();

    for(i = 1; i<=count; i++; x++) {
        var line = $('<div class="numberedtextarea-number numberedtextarea-number-' + i + '">' + i + '</div>').appendTo(linesDiv);

        if(i === count) {
            line.css('margin-bottom', paddingBottom + 'px');
        }
    }
}

有什么想法吗？

PS对不起我的英语不好

Answer 1

1.Tweak renderLineNumbers - 函数：

 function renderLineNumbers(element, settings) {
    element = $(element);

    var linesDiv = element.parent().find('.numberedtextarea-line-numbers');
    var count = element.val().split("\n").length;
    var paddingBottom = parseFloat(element.css('padding-bottom'));
    var j = 0;

    linesDiv.find('.numberedtextarea-number').remove();

    for (i = 1; i <= count; i++) {
      if (settings.labels && j == settings.labels.length) {
        j = 0;
      }
      var lineLabel = settings.labels ? settings.labels[j] : i;
      var line = $('<div class="numberedtextarea-number numberedtextarea-number-' + i + '">' + lineLabel + '</div>').appendTo(linesDiv);
      j++;

      if (i === count) {
        line.css('margin-bottom', paddingBottom + 'px');
      }
    }
  }

2.Define 带有标签的数组，在初始化插件时将其设置为附加选项

var labels = ['line1', 'line2', 'line3', 'line4'];
$('textarea').numberedtextarea({labels: labels});

Example

在文本区域的每一行旁边显示一个标签

show a label next to each line in textarea

html

javascript

jquery

textarea