[英]Target a specific element with the same classes jquery
这是高级别的代码,我有多个这样的列表,结构如下:
<li class="wrap-input">
<p>Some sentence</p>
<select class="form-control">
...
</select>
<div class="button-in-input">
...
</div>
</li>
.
.
.
我想要做的是,每当用户关注“表单控制”select 时,应该显示带有“输入按钮”class 的 div,但仅在那个特定的 li 元素中。 我用这个 jquery 代码试了一下:
$(".form-control").focusin(function() {
$(".button-in-input").show();
}).focusout(function() {
$(".button-in-input").hide();
});
但是,当然,这可以推广到我拥有的所有 li 元素。 我假设有一种方法可以使用this关键字,但请注意 select 和 div 元素是兄弟元素。
任何帮助,将不胜感激!
PS:我想避免使用 ID,否则会有大量重复代码
你可以用纯 CSS 做到这一点。
.wrap-input .button-in-input {
display: none;
}
.wrap-input select.form-control:focus + .button-in-input {
disply: block;
}
第二个选择器中的select不是必需的,但如果存在具有相同 class 的不同项目,它会有所帮助。
你可以简单地在 css 中使用:focus
来做到这一点,不需要花哨的 javascript 代码
.form-control:focus + .button-in-input {
display: block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.