Jquery Focus问题

-1

我有下面的代码，希望有一个通用的函数，如果可能的话。当需要发生的时候，顶部的标签需要改变颜色。我有一个背后的颜色渐变，所以我需要使用透明的PNG的角落。布局宽度必须是液体，所以我不能真正改变HTML太much.`Jquery Focus问题

<div class="inputBody"> 
<div class="inputtop"><span class="inputtoptext">Username</span></div> 
<div><input type="text" size="25"></div>` 
</div> 

<script> 
$('input').focus(function() { 
    $(this).addClass("yellowinput"); 

}); 

$('input').blur(function() { 
    $(this).removeClass("yellowinput"); 
}); 
</script>

来源

2012-03-14 David Nuckols

这是什么问题？它不起作用吗？你得到什么错误？ – ManseUK 2012-03-14 21:35:04

请**想象一下，你是别人正在阅读你的问题**，你知道那个人问什么？ – gdoron 2012-03-14 21:39:17

我要求将背景更改为输入上方的文本。我已经重新格式化并使其更易于阅读。当你加载页面“inputtoptext”有一个蓝色的背景。我想在点击文本输入框时将其更改为黄色。 – 2012-03-15 20:20:23

你可以制作一个这样的单元上的一段代码。所有相关的id值都会更改为类名称，并将整个片段放入容器中。这可以让我们以相对于导致事件的对象的通用方式查找与此输入容器关联的对象。

<div class="inputContainer"> 
    <span class="orderlabel-left"> 
     <img src="resources/images/labelbackground-left.png" class="leftsidecorneruser"> 
    </span> 
    <span class="orderlabel orderlabelcommon">Username</span> 
    <span class="orderlabel-right"> 
     <img src="resources/images/labelbackground-right.png" class="rightsidecorneruser"> 
    </span> 
    <div> 
     <input type="text" value="" name="" class="orderinput" size="40" tabindex="1" id="user"> 
    </div> 
</div> 


$('input').focus(function() { 
    var container = $(this).closest(".inputContainer"); 
    container.find(".leftsidecorneruser").attr("src", "resources/images/yellowleft.png"); 
    container.find(".rightsidecorneruser").attr("src", "resources/images/yellowright.png"); 
    container.find(".orderlabelcommon").removeClass("orderlabel").addClass("yellowbackground"); 
}); 
$('input').blur(function() { 
    var container = $(this).closest(".inputContainer"); 
    container.find(".leftsidecorneruser").attr("src", "resources/images/labelbackground-left.png"); 
    container.find(".rightsidecorneruser").attr("src", "resources/images/labelbackground-right.png"); 
    container.find(".orderlabelcommon").addClass("orderlabel").removeClass("yellowbackground"); 
});

仅供参考，不同的方法会少了很多代码来完成，并大多采用CSS规则是这样的：

$('input').focus(function() { 
    $(this).closest("inputContainer").addClass("hasFocus"); 
}); 

$('input').blur(function() { 
    $(this).closest("inputContainer").removeClass("hasFocus"); 
});

然后，你只会让你的所有CSS规则，但这取决于是否一个对象是否有父级CSS类.hasFocus。图像将不得不变成背景图像，但它们甚至可以在CSS中完成。

来源

2012-03-14 21:40:52 jfriend00

工作。我以前从未使用过最接近的功能。 – 2012-03-15 20:37:35

@DavidNuckols - 因为你在stackoverflow上是新手，你是否意识到，当你问一个问题时，你回馈社区的方式是，你通过点击左边的复选标记来告诉社区哪个答案最好地回答了你的问题的答案？这也将为你赢得一些声望点，最终让你在这里拥有其他特权。 – jfriend00 2012-03-15 20:56:58

-1

你真的应该等待DOM是准备建立事件处理程序之前：

<script type="text/javascript"> 
    $(document).ready(function() { 
     // your code here 
    }); 
</script>

我不知道这是否能解决您的问题（正如其他人指出的那样，问题并不清楚），但这是一个很好的做法。您还应该将script -tag放在<head>-标签之间。

来源

2012-03-14 21:40:27 Christoffer

看起来他的脚本在'body'的底部，所以没关系。 – gdoron 2012-03-14 21:41:18

如果javascript代码实际位于文件中的DOM元素之后，则这不是必需的。 – jfriend00 2012-03-14 21:41:38

刚刚编辑我的评论注意，这只是通常的做法。 – Christoffer 2012-03-14 21:42:08

Jquery Focus问题

回答

相关问题