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

参考文献：

jQuery循环并在keyup上附加动态列表

1 个答案: