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://api.jquery.com/prev/）而不是$this.previousSibling()。我在您的示例中对此进行了更改，并且有效。

如果您有兴趣，也可以使用普通的JavaScript方法获取上一个兄弟姐妹（https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling）。

Answer 2

将id和input添加到for并将label添加到$('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'); } });来将两者关联在一起是一种可访问性的好习惯，我已经更新了您的代码示例可在此处工作：https://codepen.io/kfedorov91/pen/LBwdrj

也在此处摘录：

.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>

SELECT REGEXP_SUBSTR('https://example.com/a/b/c?name=me', 'https://example.com/a/b/c\?name=\\w+')

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

2 个答案: