創建浮動標簽 - 未正確遍歷 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

要選擇“緊接在前的兄弟”，請使用$this.prev() （請參閱： https : $this.previousSibling() ）而不是$this.previousSibling() 。 我在你的樣本中改變了它並且它起作用了。

如果您有興趣，也可以使用 vanilla JavaScript 方法來獲取前一個兄弟 ( https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling )。

Answer 2

對於可訪問性而言，將id s 添加到input s 並將for s 添加到label s 以將兩者關聯在一起是一個很好的做法，更新示例：

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