Целевой тег `label` рядом с` input` с помощью jQuery

Я пытаюсь настроить таргетинг на этикетку с помощью .closest('label'), .next('label') для таргетинга на label. Что мне не хватает?

$('input').on('focus', function() {
  $(this).parent().addClass('textblock');
  $(this).next('label').css('top', '-27px');
  console.info('hello');
});

$('input').on('blur', function() {
  if ($(this).val() == '')
    $(this).parent().removeClass('textblock');
  $(this).next('label').css('top', '11px');
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "form-group col-md-6">
  <input type = "text" class = "form-control not-required" name = "portfolio_link" value = "">
  <span class = "bar"></span>
  <label for = "portfolio_link" class = "input-empty">Portfolio Link</label>
</div>

jquery html forms

07.08.2018 19:26

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Ответы 3

next() будет нацелен на следующего брата, поэтому

Ты можешь использовать:

$(this).parent().find('label');

Кроме того, вы можете настроить таргетинг напрямую:

$('.input-empty').css('top', '-27px');

$('input').on('focus', function() {
    $(this).parent().addClass('textblock');
    $(this).parent().find('label').css('top', '-27px');
    console.info('hello');
});

$('input').on('blur', function() {
    if ($(this).val() == '')
        $(this).parent().removeClass('textblock');
        $(this).parent().find('label').css('top', '11px');
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "form-group col-md-6">
    <input type = "text" class = "form-control not-required" name = "portfolio_link" value = "">
    <span class = "bar"></span>
    <label for = "portfolio_link" class = "input-empty">Portfolio Link</label>
</div>

Как правило, я сильно избегаю использования .parent в пользу .closest. Намного более терпим к изменениям DOM ....

— 07.08.2018 19:51

07.08.2018 19:30

next() не будет работать, потому что он нацелен на следующего брата, но следующий за ним брат input в вашем примере - это span. Вместо этого вы можете использовать siblings():

$('input').on('focus', function() {
    $(this).parent().addClass('textblock');
    $(this).siblings('label').css('top', '-27px');
    console.info('hello');
});

$('input').on('blur', function() {
    if ($(this).val() == '')
        $(this).parent().removeClass('textblock');
        $(this).siblings('label').css('top', '11px');
});

.form-group {
  margin-top:30px;
}
label {
  position:relative;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "form-group col-md-6">
    <input type = "text" class = "form-control not-required" name = "portfolio_link" value = "">
    <span class = "bar"></span>
    <label for = "portfolio_link" class = "input-empty">Portfolio Link</label>
</div>

@cale_b Мой ответ предлагает использовать siblings(), а не parent(). Даже при использовании closest() javascript может сломаться, если структура DOM изменится (например, при перемещении метки за пределы div, содержащего ввод).

— 07.08.2018 19:57

Привет, мои искренние извинения. Я думал, что размещаю этот комментарий против вопрос, а не против вашего ответа. Ваш ответ отличный.

— 07.08.2018 20:57

07.08.2018 19:31

Если вы хотите всегда настраивать таргетинг на соответствующий label для input, вы можете запросить его через атрибут name затронутого элемента input:

$('input').on('focus', function() {
  $(this).parent().addClass('textblock');
  $('label[for = "' + $(this).attr('name') + '"]').css('top', '-27px');
  console.info('hello');
});

$('input').on('blur', function() {
  if ($(this).val() === '')
    $(this).parent().removeClass('textblock');
  $('label[for = "' + $(this).attr('name') + '"]').css('top', '11px');
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "form-group col-md-6">
  <input type = "text" class = "form-control not-required" name = "portfolio_link" value = "">
  <span class = "bar"></span>
  <label for = "portfolio_link" class = "input-empty">Portfolio Link</label>
</div>

07.08.2018 19:37

Другие вопросы по теме

Изменять содержимое страницы с интервалом на основе JSON

Увеличьте время загрузки сайта при загрузке данных на статическом сайте

Как центрировать подэлементы под div в bootstrap 4?

Убедитесь, что CSS не влияет на все страницы с родительским классом

Загрузить онлайн-диаграмму в webView

Фиксированный текст наложения [html]

Недействительный примитив JSON: Дата

Плагин Javascript tablesorter не работает

Очистка вложенных веб-тегов vba

Как загрузить внешний HTML-код верхнего и нижнего колонтитулов на страницах AMP-HTML

Целевой тег `label` рядом с` input` с помощью jQuery

Ответы 3

Другие вопросы по теме

Похожие вопросы