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

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

以下是示例代码的链接：

谢谢

冬青树

<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;
}

试验
测试2
$（'formdiv'）.find（'input'）.on（'keyup'，函数（e）
{
变量$this=$（this），
$sibling=$this.previousSibling（）；
如果（e.type=='keyup'）
{
如果（$this.val（）！=''）
{
$sibling.removeClass（'js-hide-label'）；
} 
其他的
{
}
}});
.js隐藏标签{
不透明度：0；
}

要选择“前一个兄弟姐妹”，请使用

$this.prev（）

（请参阅：）而不是

$this.previousSibling（）

。我在你的样品中改变了这一点，它起了作用

---

如果您感兴趣，还可以使用普通JavaScript方法获取上一个兄弟姐妹（）。

将

id

s添加到您的

输入中，将
s添加到您的
标签中，并将
s添加到
标签中，这是一种良好的可访问性做法，更新了示例：


$（'form div input'）。在（'keyup'，函数（e）上{
var$this=$（this）；
var$label=$（“label[for='”+$this.attr（'id'）+“]]）；
如果（$this.val（）==''）{
$label.addClass（'js-hide-label'）；
}否则{
$label.removeClass（'js-hide-label'）；
}
});
。浮动标签{
不透明度：1；
过渡：不透明度0.5s；
}
.js隐藏标签{
不透明度：0；
}
形式{
利润率：20px；
}

试验
测试2
谢谢！非常有用的帖子。一直在努力学习最佳实践。谢谢！呃，我很遗憾我错过了基本的选择。face palm我发誓在寻求外部帮助之前我做了很多研究，但我只是从主要使用css和html过渡到学习更多javascript，所以有一些小问题。再次感谢@HollyWilliford不用担心，很高兴我们能帮忙