Скрытие элемента, когда поле ввода пуст

Question

Так что мой селектор с именем. В нем является полем ввода, и я бы хотел, чтобы он запускал $ ('# status div'). Hide(); когда вход не имеет значения, например, если люди что-то написали и удалили то, что они написали, мне бы хотелось, чтобы он скрывал статус div. Я действительно не уверен, что было бы лучшим способом сделать это, было бы неплохо с некоторой помощью!

Вот код, я делал до сих пор:

$('.username').on('keyup', function() { 
    if ($(this).val().length > 0) { 
     $.ajax({ 
      'url': 'api/username/', 
      'type': 'post', 
      'data': {'username': $('.username').val()}, 
      success: function(data) { 
       if (data.available) { 
        showStatus(0); 
       } else { 
        showStatus(1); 
       } 
      }, 
      error: function(data) { 
       showStatus(2); 
      }, 
      complete: function(data) { 
       console.log('complete'); 
      } 
     }); 
    } else { 
     showStatus(0); 
    } 
}); 

function showStatus(id) { 
    $('#status div').hide(); 
    $($('#status div')[id]).show(); 
} 

Я пытался что-то вроде

if($(".username").val()){ 
    $('#status div').hide(); 
} 

, но он не работает

Если вы чувствуете, как я не объяснил себе достаточно хорошо, не стесняйтесь спрашивать!

Answer 1

Ваш тест .length > 0 уже проверяет пустой ввод. Поместите то, что вы хотите в предложение else, а не showStatus(0).

else { 
    $("#status div").hide(); 
}