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，这可以正常工作。例如，如果我从＆＃39; TextBox1＆＃39;移动焦点。到＃TextBox3＆＃39;，＆＃39; block1＆＃39;将逐渐消失并且＆＃39; block2＆＃39;将会消失。这很棒。

但是，当我尝试在同一个div中更改为不同的子输入时，会出现问题。例如，如果我选择了＆＃39; TextBox1＆＃39;到＆＃39; TextBox2＆＃39;这将解除焦点＆＃39;其次是关注焦点＆＃39;父母再次动画，因此褪色＆＃39; block1＆＃39;再次出来。

那么，有什么方法可以在父子div的一个子输入有焦点的情况下更改父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);
});

这是一个小提琴演示http://jsfiddle.net/m0nk3y/31yjdogc/1/。你将需要jQueryUI，以防你还没有包含它。

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

Answer 2

最后，我的问题的解决方案是Sunland提供的简单答案。在开始下一个动画之前简单地添加.stop（）可以解决问题。

即。用这个：

$(this).stop().animate({
   backgroundColor: "#e0f4fb"
}, 1000);

而不是：

$(this).animate({
   backgroundColor: "#e0f4fb"
}, 1000);

可以在这个小提琴http://jsfiddle.net/Ly7jyvuf/8/

中看到一个工作示例

再次感谢Sunland和Gene对此问题的帮助。

JQuery - 当孩子有焦点时对父进行操作

2 个答案: