jQuery цикл и добавить динамический список на клавиатуре

Question

Я пытаюсь создать простую форму с двумя полями: label и value. После заполнения этих полей пользователь должен нажать клавишу Enter, и еще два поля (метка и значение) должны появиться. До сих пор мне удалось заставить все нормально работать. Теперь мне нужны данные ввода из каждого поля метки и значения, чтобы заполнить неупорядоченный список.

Насколько я понял, псевдо-код должен быть что-то вроде этого: если ключ Enter нажимается создать два новых текстовое поле (этикетки и значение), скопируйте ввод-данные и отображать его внутри li элемента; затем повторите.

Код, который я пробовал, ниже, мне не хватает цикла в функции keyup, но даже без него элементы li не отображаются только после того, как я создаю два новых поля, и я возвращаюсь к редактированию первых двух (проверьте JSfiddle.). Я попытался закодировать цикл этой функции, но все не удалось, поэтому я подумал о размещении здесь, возможно, я смотрю на все это неправильно.

Это HTML-код:

<button id="addChart">Add Chart Label and Value</button> 
<div id="label"> 
    <p> 
     <label for="label"> 
      <input type="text" id="labelrow" size="20" name="label" value="" placeholder="Input Label" /> 
     </label> 
     <label for="value"> 
      <input type="text" id="valuerow" size="20" name="value" value="" placeholder="Input Value" /> 
     </label> 
    </p> 
</div> 
<ul class="jrGraph"> 
    <li> 
     <span class="label"></span> 
     <span class="value"></span>   
    </li> 
</ul> 

Это скрипт JQuery:

$(function() { 
    var scntDiv = $('#label'); 
    var i = $('#label p').size() + 1; 

    $('#addChart').on('click', function() { 
     $('<p><label for="label"><input type="text" id="labelrow" size="20" name="label_' + i + '<p><label for="value"><input type="text" id="valuerow" size="20" name="value_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv); 
     i++; 
     return false; 
    }); 

    $('#label').keyup(function (event) { 
     if (event.keyCode == 13) { 
      $('#addChart').click(); 
      $("#labelrow").on("keyup change", function() { 
       $('span.label').text(this.value); 
      }); 
      $("#valuerow").on("keyup change", function() { 
       $('span.value').text(this.value); 
      }); 
     } 
    }); 

    $('#label').on('click', '.remScnt', function() { 
     if (i > 2) { 
      $(this).parents('p').remove(); 
      i--; 
     } 
     return false; 
    }); 
}); 

и JSfiddle.

Answer 1

Я предлагаю следующее, хотя я подозреваю, что это может быть оптимизирована :

$('#label').on('keyup', function (e) { 
    var self = e.target, 
     $self = $(self), 
     target = $('.jrGraph').first(); 
    if (e.which === 13 && self.id === 'labelrow') { 
     $self.closest('label') 
      .next().find('input').focus(); 
    } else if (e.which === 13) { 
     var label = $('#labelrow'), 
      val = $('#valuerow'), 
      li = $('<li />').appendTo(target); 
     $('<span />', { 
      'class' : 'label', 
      text: label.val() 
     }).appendTo(li); 
     $('<span />', { 
      'class' : 'value', 
      text: val.val() 
     }).appendTo(li); 
     label.val('').focus(); 
     val.val(''); 
    } 
}); 

JS Fiddle demo.

Ссылки:

• appendTo().
• closest().
• find().
• first().
• focus().
• next().
• on().
• val().