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

我在一个页面上有多个div，而该页面又包含多个输入。我想更改任何有子对话框的div的背景，并且在焦点移动到的另一个 div的输入子对象时再将其改回。到目前为止，我有以下几点：JQuery - 当孩子有焦点时对父进行操作

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的输入孩子变成另一个我选项卡。例如，如果我将焦点从'TextBox1'移动到'TextBox3'，'block1'将淡出，'block2'将淡入。这太棒了。

但是，当我尝试在同一个div内更改为不同的子输入时出现问题。例如，如果我从“文本框1”选项卡选择到“文本框2”，则会再次在父级上激发“焦点外”动画，然后再次退出“块1”。

那么，有什么办法可以改变父div的背景颜色，当它的一个子输入有焦点，然后只在移动到另一个div的输入子时才将其恢复回来？

来源

2014-09-03 John P

尝试使用停止，然后再开始下一个动画$（this）.stop（）。animate（ – Sunand 2014-09-03 20:45:16

我已更新我的示例，下面提供了一个小提琴的链接，我希望这会有所帮助 – 2014-09-03 21:29:21

Hey @Sunand，诀窍！如果你把这个答案放在答案中，我会将它标记为正确的。 – 2014-09-04 08:35:06

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

I.e.使用此：

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

，而不是这样的：

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

工作示例可以在这个小提琴可见再次http://jsfiddle.net/Ly7jyvuf/8/

由于桑兰都与基因有关的此问题的帮助。

来源

2014-09-04 09:49:14

您是否尝试过直接针对输入，并触发时改变父母，就像这样：

$('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，以防万一你还没有包含它。

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

来源

2014-09-03 21:03:25

感谢上百万人关注这个基因。对此，我真的非常感激。不幸的是，你的小提琴的例子似乎和我一样遭遇了同样的问题，也就是当你从textbox1选项到textbox3（都在同一个div中）背景淡出/在动画触发器中。我毫不怀疑你明白我在找什么，但为了安全起见，我编辑了我的文章（希望）让事情更清楚些。 :-) – 2014-09-04 08:16:35

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

回答

相关问题