0

我正在尝试构建一个包含两个字段的简单表单：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。

4

1 回答 1

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 小提琴演示。

参考：

于 2013-06-16T18:29:40.550 回答