Question

我想在span元素中显示输入框的文本。另外我想在页面加载时加载输入框的内容。

目前我有这段代码，不是很短：

if( $('#subject').val().length > 0 ) {
    $('#text').text(': '+$('#subject').val());
}

$('#subject').on('input', function() {
    if( $('#subject').val().length > 0 ) {
        $('#text').text(': '+$(this).val());
    } else {
        $('#text').empty();
    }
});

有人可以帮助我提高效率吗？

Answer 1

使用 trigger() 在页面加载时触发元素上的相同事件。

＆＃13;

$('#subject').on('input', function() {
  var value = $('#subject').val();
  $('#text').text( value.length > 0 ? ': ' + value : '' );
}).trigger('input');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span id="text"></span>
<input id="subject" value="asdasdasd">

＆＃13;

Answer 2

优化此代码没有意义，因为它足够小，不会产生任何性能问题。不过这是我对“清洁”代码的建议：

var input = $('#subject'),
    span = $('#text');

function onInput() {
    span.text(input.val() ? ':' + input.val() : '');
};
onInput();
$(input).on('input', onInput);

更改输入文本上的范围文本，并在页面加载时加载它

2 个答案: