Может ли кто-нибудь помочь мне сделать этот скрипт проще?

Question

У меня есть диапазон и поле ввода, а когда поле ввода пуст, мне нужно, чтобы он говорил «Пусто». Когда я вводю какой-либо текст в поле, диапазон автоматически добавит буквы/цифры в диапазон. Если значение входных данных будет удалено, диапазон снова скажет «Пусто».

if($.trim($('#input').val()) == ''){ 
    $('#span').html('Empty'); 
} 
$('#input').bind("change keyup input",function() { 
    $('#span').html($(this).val()); 
    if($.trim($('#input').val()) == ''){ 
     $('#span').html('Empty'); 
    } 
}); 

Я думаю, что это может быть реализовано более простым способом и, надеюсь, внутри одной функции. Это возможно?

Answer 1

Он прост: установить HTML в #span элемента с функцией, а также выполнять функции как во время выполнения, и во время определенных событий, связанных с #input поля. Я рекомендую использовать .on() вместо .bind():

// Define function that sets html value 
 
var updateSpan = function() { 
 
    var v = $.trim($(this).val()); 
 
    if(v === '') { 
 
    $('#span').html('Empty'); 
 
    } else { 
 
    $('#span').html(v); 
 
    } 
 
} 
 

 
// Execute function at runtime 
 
// We use .call() so that `this` in the function refers to our input 
 
updateSpan.call($('#input')[0]); 
 

 
// Bind the function as a callback during these events, too 
 
// The element is automatically passed as `this` 
 
$('#input').on('change keyup input', updateSpan);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="input" /> 
 
<span id="span"></span>

Если вы действительно любите запутанный код, вы можете даже сократить if заявления в этом:

var updateSpan = function() { 
    var v = $.trim($(this).val()); 
    $('#span').html(v === '' ? 'Empty' : v); 
} 

Answer 2

$('#input').on("change keyup input",function() { 
    if($.trim($('#input').val()) == ''){ 
     $('#span').html('Empty'); 
    } else { 
     $('#span').html($(this).val()); 
    } 
}); 

Answer 3

Да, вы только действительно нужна клавиатура почти в каждом случае, о котором я мог думать, от головы.

Вы можете заменить .bind на .on и триггеры на «клавиатуру».

После того, как вы создали функцию, вы можете вызвать ее, включив один из триггеров, все еще используя тот же селектор.

Вроде так;

$('#input').on('keyup', function(){ 
    text = $(this).val().trim(); 
    if(text == ''){ 
     $('#span').html('Empty'); 
    } else { 
     $('#span').html(text); 
    } 
}).trigger('keyup'); 

Или вы можете определить функцию типа;

$.fn.emptyCheck = function(){ 
     return (this.val().trim() != ''); 
} 

или

$.fn.emptyCheck = function(){ 
    text = this.val().trim(); 
    if(text == ''){ 
     $('#selector').html('Empty'); 
    } else { 
     $('#selector').html(text); 
} 

затем вызвать его с помощью

$('input').on('keyup', function(){ 
     if($(this).emptyCheck()){ 
      /* your function */ 
     } 
}); 

или

$('input').on('keyup', function(){ 
    $(this).emptyCheck(); 
} 

соответственно.

Answer 4

Это должно сделать трюк:

$('#input') 
    .bind("change keyup input", function() { 
     updateSpan($(this).val()); 
    }) 
    .trigger('keyup'); 

function updateSpan(s) { 
    $('#span').html(s.trim() == '' ? 'Empty' : s); 
} 

Окончательный .keyUp() убеждается событие запускается один раз, поэтому продолжительность инициализации.

Вы можете написать это с меньшим количеством кода. Однако я считаю, что это хороший компромисс. Вы можете прочитать его за один раз и не нужно расшифровывать сложные выражения, и нет избыточности.