Question

我正在尝试使用.closest('label')，.next('label')来定位标签来定位label。我想念什么？

$('input').on('focus', function() {
  $(this).parent().addClass('textblock');
  $(this).next('label').css('top', '-27px');
  console.log('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>

Answer 1

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.log('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>

Answer 2

next()无法工作，因为它以紧随其后的同级为目标，但是您的示例中紧随其后的input是span。您可以改用siblings()：

$('input').on('focus', function() {
    $(this).parent().addClass('textblock');
    $(this).siblings('label').css('top', '-27px');
    console.log('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>

Answer 3

如果您想始终将label的目标定为input，则可以通过受影响的name元素的input属性对其进行查询：

$('input').on('focus', function() {
  $(this).parent().addClass('textblock');
  $('label[for="' + $(this).attr('name') + '"]').css('top', '-27px');
  console.log('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>

使用jQuery将“标签”标签定位到“输入”旁边

3 个答案: