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

Posted 2021-03-27

我正在尝试创建一个在输入框中输入时出现的浮动标签。我认为我的问题是我没有正确地穿过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;
}

答案

这是一个很好的做法，可以将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>

另一答案

要选择“前一个兄弟姐妹”，请使用$this.prev()（参见：https://api.jquery.com/prev/）而不是$this.previousSibling()。我在你的样本中改变了它并且它有效。

如果你有兴趣，还有一个vanilla javascript方式来获取前一个兄弟姐妹（https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling）。

以上是关于创建浮动标签 - 不能正确遍历DOM的主要内容，如果未能解决你的问题，请参考以下文章

DOM_mail效果

html 这个要点包含使用RightCare品牌创建浮动框的片段。

MYBATIS05_ifwherechoosewhentrimsetforEach标签sql片段

c#遍历嵌套层次很多的xml

将float标签放在kendoReact DatePicker中

缺少针对遍历 dom 的正确元素