创建浮动标签 - 不能正确遍历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将两者联系在一起，我已经更新你的代码示例在这里工作：https://codepen.io/kfedorov91/pen/LBwdrj

另外在这里的片段：

$('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）。