针对具有相同类 jquery 的特定元素答案

【问题标题】：Target a specific element with the same classes jquery针对具有相同类 jquery 的特定元素
【发布时间】：2021-07-18 21:13:40
【问题描述】：

这是高级代码，我有多个这样的列表，结构如下：

<li class="wrap-input">
    <p>Some sentence</p>
    <select class="form-control">
      ...
    </select>
    <div class="button-in-input">
      ...
    </div>                                        
</li>
.
.
.

我想要做的是，每当用户关注“表单控件”选择时，应该显示具有“输入按钮”类的 div，但仅在那个特定的 li 元素中。我用这个 jquery 代码试了一下：

$(".form-control").focusin(function() {
        $(".button-in-input").show();
    }).focusout(function() {
        $(".button-in-input").hide();
    });

当然，这可以推广到我拥有的所有 li 元素。我假设有一种方法可以使用 this 关键字，但请注意 select 和 div 元素是兄弟元素。
任何帮助将不胜感激！

PS：我想避免使用 ID，否则会有大量重复代码

【问题讨论】：

标签： javascript html jquery css twitter-bootstrap

【解决方案1】：

你可以用纯 CSS 做到这一点。

.wrap-input .button-in-input {
    display: none;
}
.wrap-input select.form-control:focus + .button-in-input {
    disply: block;
}

第二个选择器中的 select 不是必需的，但它有助于防止具有相同类的不同项目。

【讨论】：

所以我在“button-in-input”元素中添加了一个 onClick 事件，但是使用您的代码，发生的事情是当我单击该元素时，输入似乎消失了在单击事件可以注册之前获得焦点。知道如何解决这个问题吗？
As per you original code, when the select is in focus the input div is shown, and when the focus leaves the select, the input button is hidden.如果您希望输入按钮即使在选择不再处于焦点后仍保持可见，您应该在您的问题中说明这一点。目前我们不知道这是您的意图。

【解决方案2】：

你可以简单地在 css 中使用 :focus 来完成，不需要花哨的 javascript 代码

.form-control:focus + .button-in-input {
    display: block;
}

【讨论】：

所以我在“button-in-input”元素中添加了一个 onClick 事件，但是使用您的代码，发生的事情是当我单击该元素时，输入似乎消失了在可以注册点击事件之前获得焦点。知道如何解决这个问题吗？