代码之家 › 专栏 › 技术社区 › yavg

如何在对象HTMLInputElement上使用queryselector

css javascript

yavg · 技术社区 · 5 年前

我试着当文本字段有焦点时 div 与类一起选择: autocomplete ,这是一个理解我想法的例子,在我的实际问题中它更复杂。我只需要在确定了具有焦点的元素之后,选择最近的元素 部门 .autocomplete 同级同学,我想这样。我知道在css中我应该使用如下内容:

input ~ div.autocomplete
($event.target is input in my case)

但在这种情况下我不知道怎么做。非常感谢。

function fn_selectAutocompleteClass($event) {
  console.log(($event.target));
}

.selectAutocomplete {
  background: green;
}

<input id="text" type="text" onfocus="fn_selectAutocompleteClass(event)">
<i class="icon"></i>
<div class="autocomplete">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum itaque placeat, ad vel reprehenderit illo, harum nemo laudantium, dolorem unde aut distinctio! Consectetur vitae deleniti veritatis autem numquam officia eaque.</div>

1 回复 | 直到 5 年前

Manish 5 年前

在这种情况下,您可以访问 .autocomplete 使用 querySelectorAll

function fn_selectAutocompleteClass($event) {
  console.log($event.target.parentNode.querySelectorAll('.autocomplete')[0]);

}

.selectAutocomplete {
  background: green;
}

<input id="text" type="text" onfocus="fn_selectAutocompleteClass(event)">
<i class="icon"></i>
<div class="autocomplete">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum itaque placeat, ad vel reprehenderit illo, harum nemo laudantium, dolorem unde aut distinctio! Consectetur vitae deleniti veritatis autem numquam officia eaque.</div>

希望这有帮助:)

推荐文章