Zeige ein Label neben jeder Zeile im Textfeld

Question

Was ich tun möchte, ist die Etiketten neben jeder Zeile in einem Textfeld, ich muss die Etiketten alle 5 Zeilen Schleife.

Ich versuche Benutzer jQuery numberedTextarea Plugin und anstelle von Zeilennummern möchte ich die Etiketten zeigen. Ich versuche mit dieser Funktion zu spielen und einen Schalter darin einzufügen.

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'); 
     } 
    } 
} 

Irgendeine Idee?

PS Sorry für mein schlechtes Englisch

Answer 1

1.Tweak die renderLineNumbers - Funktion:

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 ein Array mit lables, dies als zusätzliche Option gesetzt, wenn das Plug-Initialisierung

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

---

Example