Question

我想要做的是在textarea的每一行旁边放置标签，我必须每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.使用标签定义数组，在初始化插件时将其设置为附加选项

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

<强> Example

在textarea中的每一行旁边显示一个标签

1 个答案: