gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 07:59:03 25 4
gpt4 key购买 nike

我在一个页面上有多个 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 的输入子级时将其恢复回来?

最佳答案

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

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

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

关于javascript - JQuery - 当 child 获得焦点时对 parent 执行操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25653236/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com