javascript - JQuery - 当 child 获得焦点时对 parent 执行操作

Question

我在一个页面上有多个 div，而这些 div 又包含多个输入。我想更改任何具有焦点的子输入的 div 的背景，并在焦点移动到另一个 div 的输入子级时再次将其更改回来。到目前为止，我有以下内容:

HTML:

<div class="explain" id="block1">   
    <asp:TextBox ID="TextBox1" runat="server" TabIndex="1"></asp:TextBox>
    <asp:TextBox ID="TextBox2" runat="server" TabIndex="2"></asp:TextBox>      
</div>

<div class="explain" id="block2">     
    <asp:TextBox ID="TextBox3" runat="server" TabIndex="3"></asp:TextBox>
    <asp:TextBox ID="TextBox4" runat="server" TabIndex="4"></asp:TextBox>                 
</div>

JQuery:

<script>
  $(document).ready(function () {

    $(document).on('focusin', '.explain', function () {
        if (true) {
            $(this).animate({
                backgroundColor: "#e0f4fb"
            }, 1000);
        }
    });

    $(document).on('blur', '.explain', function () {
            $(this).animate({
                backgroundColor: "#ffffff"
            }, 1000);
    });

  });
</script>

如果我从一个 div 的输入子项切换到另一个 div ，则效果很好。例如，如果我将焦点从“TextBox1”移动到“TextBox3”，“block1”将淡出，“block2”将淡入。这很棒。

但是，当我尝试更改为同一 div 内的不同子输入时，问题就出现了。例如，如果我从“TextBox1”切换到“TextBox2”，这将在父级上再次触发“失焦”动画，然后再次触发“聚焦”动画，从而使“block1”淡出并再次淡入。

那么，有什么方法可以在父 div 的一个子输入获得焦点时更改其背景颜色，然后仅在移动到另一个 div 的输入子级时将其恢复回来？

Answer 1

您是否尝试过直接定位输入，并在触发时更改父项，如下所示:

$('input').on('focusin', function() {
    $(this).parents('.explain').animate({
            backgroundColor: "#e0f4fb"
        }, 1000);
});

关于模糊:

$('input').on('blur', function() {
    $(this).parents('.explain').animate({
            backgroundColor: "#ffffff"
        }, 1000);
});

这是一个 fiddle 来演示这一点 http://jsfiddle.net/m0nk3y/31yjdogc/1/ 。您将需要 jQueryUI，以防万一您还没有包含它。

我希望这有帮助。祝你好运。