创建浮动标签 - 未正确遍历 DOM

Question

我正在尝试创建一个浮动标签，当您在输入框中输入内容时会显示该标签。我认为我的问题是我没有正确地遍历 dom 来隐藏标签，但我不确定。

这里是示例代码的链接： https://codepen.io/holly-williford/pen/GBVQqZ

谢谢，

冬青

<form>
<div>
    <label class="floating-label js-hide-label">Test</label> 
        <input placeholder="test" class="input" type="text"> 
    <label  class="floating-label js-hide-label">Test 2</label>
        <input placeholder="test1" class="input" type="text">
</div> 
</form> 



  $('form div').find('input').on('keyup', function(e)
{

    var $this = $(this),
        $sibling = $this.previousSibling();


    if (e.type == 'keyup') 
    {
        if($this.val() != '' ) 
        {
            $sibling.removeClass('js-hide-label');
        } 

        else 

        {

        }

}});

.js-hide-label {
opacity: 0;
}

Answer 1

将ids 添加到您的inputs 和fors 到您的labels 以将两者关联在一起是一个很好的可访问性做法，更新示例：

$('form div input').on('keyup', function(e) {
  var $this = $(this);
  var $label = $("label[for='"+$this.attr('id')+"']");
  if ($this.val() === '') {
    $label.addClass('js-hide-label');
  } else {
    $label.removeClass('js-hide-label');
  }
});

.floating-label {
  opacity: 1;
  transition: opacity 0.5s;
}

.js-hide-label {
  opacity: 0;
}

form {
  margin: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div>
    <label for="test" class="floating-label js-hide-label">Test</label> 
  <input id="test" placeholder="test" class="input" type="text"> 
  <label for="test2" class="floating-label js-hide-label">Test 2</label>
  <input id="test2" placeholder="test1" class="input" type="text">
</div> 
</form>

Answer 2

要选择“紧接在前面的兄弟”，请使用 $this.prev()（请参阅：https://api.jquery.com/prev/）而不是 $this.previousSibling()。我在您的示例中更改了它并且它有效。

如果您有兴趣，还可以使用 vanilla JavaScript 方法来获取上一个兄弟 (https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling)。