Удалить класс метки, когда соответствующее поле ввода заполнено

Question

Я хотел бы удалить класс "visuallyhidden" на этикетках заполненных текстовых полей. Поэтому, когда я начинаю вводить что-то в поле ввода, я хочу класс "visuallyhidden" очищен, чтобы надпись появилась над полем ввода. Однако, когда я стираю текст из этого поля ввода, я хочу, чтобы класс "visuallyhidden" был добавлен обратно на соответствующую метку.

<label for="firstname" class="visuallyhidden">First Name</label> 
<input type="text" id="firstname" placeholder="First Name"/> 

<label for="lastname" class="visuallyhidden">Last Name</label> 
<input type="text" id="lastname" placeholder="Last Name"/> 

Моя неудачная попытка на JQuery, что несколько работ, но затрагивает все метки

$('input').keypress(function() { 
    $('label').addClass('visuallyhidden'); 
}); 
$('input').blur(function() { 
    if(!$(this).val()) { 
     $('label').removeClass('visuallyhidden'); 
    } 
}); 

Answer 1

Вы можете использовать JQuery toggleClass() метод следующим образом:

$(":input").on("keyup", function() { 
 
    $(this).prev("label").toggleClass("visuallyhidden", (this.value=="")) 
 
});

.visuallyhidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="firstname" class="visuallyhidden">First Name</label> 
 
<input type="text" id="firstname" placeholder="First Name" /> 
 

 
<label for="lastname" class="visuallyhidden">Last Name</label> 
 
<input type="text" id="lastname" placeholder="Last Name" />

Answer 2

Чтобы настроить таргетинг на конкретные label, вам просто нужно traverse the DOM with jQuery methods ...

$('input').keypress(function() { 
    $(this).prev('label').addClass('visuallyhidden'); 
}); 
$('input').blur(function() { 
    if(!$(this).val()) { 
     $(this).prev('label').removeClass('visuallyhidden'); 
    } 
}); 

См : jQuery .prev()

$(this).prev('label') хватает ближайшего предыдущего брата $(this), который соответствует селектору 'label'.