は、テキストエリアの各行の隣にラベルを表示します

Question

私がしたいことは、テキストエリアの各行の隣にラベルを置くことです。

私はユーザー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'); 
     } 
    } 
} 

私の下手な英語

Answer 1

1.Tweak renderLineNumbersて申し訳ありませんPS - 機能：あなたのlablesと

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