Question

我正在尝试根据使用jQuery实时输入到输入字段的数据更新一些文本字段。我已经得到了一个粗略的例子，但它不是非常可重复使用它需要为每个输入创建一个函数。我希望可能有更动态/更有效的方法来执行相同的任务？

$('#name').keyup(function () {
        $('#label-name').text($(this).val());
    });

    $('#address').keyup(function () {
        $('#label-address').text($(this).val());
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" type="text" placeholder="Name">
    <input id="address" type="text" placeholder="Address">
    <input id="city" type="text" placeholder="City">
    <select name="state" id="state">
        <option value="none">--</option>
        <option value="state1">State 1</option>
        <option value="state2">State 2</option>
    </select>
    <input id="zip" type="text" placeholder="Zip">
    <input id="additional" type="text" placeholder="Additional info">
    
    <p id="label-name"></p>
    <p id="label-address"></p>
    <p id="label-city"></p>
    <p id="label-state"></p>
    <p id="label-zip"></p>
    <p id="label-additional"></p>

Answer 1

如果您可以保证id始终与您所显示的相关，则可以在输入中添加一个类并执行以下操作：

$('.input').keyup(function () {
    $('#label-' + this.id).text(this.value);
});

使用jQuery可重复使用的实时显示

1 个答案: