Question

我有以下代码，如果可能的话，希望有一个通用函数。当需要发生时，顶部的标签需要改变颜色。我后面有一个颜色渐变，所以我需要在角落使用透明的PNG。布局宽度需要是流动的，所以我无法真正改变HTML。

<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>

`

Answer 1

您可以创建一个适用于此类单元的代码。所有相关的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类.hasFocus来制作所有CSS规则。图像必须更改为背景图像，但它们甚至可以在CSS中完成。

Answer 2

在设置事件处理程序之前，您应该等待DOM准备就绪：

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

我不知道这是否会解决你的问题（正如其他人所指出的那样，问题尚不清楚），但这是一种很好的做法。您还应将script - 标记放在<head> - 标记之间。

Jquery焦点问题

2 个答案: