Question

我正在尝试制作一个表单预览器。

想法是创建一个默认情况下显示打印在div上的用户信息的图层，但可以实时修改其数据并将其显示在框中。

我的代码有效，但是我不知道如何简化它。

这是我的代码：

function preview() {
    $('#previewName').html($('#Name').val());
    $('#Name').keyup(function () {
        $('#previewName').html($(this).val());
    });
    $('#previewDirection').html($('#Direction').val());
    $('#Direction').keyup(function () {
        $('#previewDirection').html($(this).val());
    });
    $('#previewPostal').html($('#Postal').val());
    $('#Postal').keyup(function () {
        $('#previewPostal').html($(this).val());
    });
    $('#previewCountry').html($('#Country option:selected').text());
    $('#Country option:selected').change(function () {
        $('#previewCountry').text($(this).text());
    });
}

<form id="form">
    <div>
        <div>
            <label>Name</label>
            <input type="text" id="Name" name="Name" value="">
        </div>

        <div>
            <label>Direction</label>
            <input type="text" id="Direction" name="Direction">
        </div>

        <div>
            <label>Postal</label>
            <input type="text" id="Postal" name="Postal">
        </div>

        <div>
            <label>Country</label>
            <div>
                <select name="Country" id="Country">
                    <option value="">x</option>
                    <option value="">y</option>
                </select>
            </div>
        </div>
    </div>
    <div>
        <div class="box">
            <p class="strong" id="previewName"></p>
            <p class="mb0" id="previewDirection"></p>
            <p id="previewPostal"></p>
            <p id="previewCountry"></p>
        </div>
    </div>
</form>

有什么主意吗？

Answer 1

您可以通过查询表单输入元素并使用ID和值来更新预览来简化此操作。

// cache form selector
var form = $('#form');
// cache all form input elements
var inputs = form.find('input');
// cache all form select elements
var selects = form.find('select');

inputs.keyup(function(){
  var id = this.id,
      value = this.value;

  $('#preview' + id).html(value); 
});

selects.change(function(){
  var id = this.id,
      option = $(this).find('option:selected'),
      value = option.val();

  $('#preview' + id).html(value); 
});

或精简版

$('#form input').keyup(function(){
  var id = this.id,
      value = this.value;

  $('#preview' + id).html(value); 
});

$('#form select').change(function(){
  var id = this.id,
      option = $(this).find('option:selected'),
      value = option.val();

  $('#preview' + id).html(value); 
});

Demo

重构键盘功能

1 个答案: