0

我有以下代码在 jQuery 1.3.2 上完美运行：

        $("#passwordLabel").click(function()
            {
                $(this).hide();
                $("#password").focus();
            }
        );

        $("#confirmpasswordLabel").click(function()
            {
                $(this).hide();
                $("#confirmpassword").focus();
            }
        );

        $("#password").focus(function()
            {
                $("#passwordLabel").hide();
            }
        );

        $("#confirmpassword").focus(function()
            {
                $("#confirmpasswordLabel").hide();
            }
        );

        $("#password").blur(function()
            {
                if($(this).val()=="")
                {
                    $("#passwordLabel").show();
                }
            }
        );

        $("#confirmpassword").blur(function(value)
            {
                if($(this).val()=="")
                {
                    $("#confirmpasswordLabel").show();
                }
            }
        );
    });

但不幸的是，当我将 jQuery 库更改为 1.6.4 版时，这些代码不再起作用。

那是因为 jQuery 1.6.4 不再有这种语法了吗？

4

2 回答 2

2

顺便说一句，你有好名字。

它看起来像是你的 JavaScript 新手。让我给你一些指示。首先，您应该尝试减少向浏览器询问元素的次数。使用 jQuery，您所要做的就是将选定的元素保存到一个变量中。我个人喜欢在我的元素变量前面加上 $，所以我知道那里有 jQuery 元素。

//too many selections
$('element').foo(); //query 1
$('element').bar(); //query 2
$('element').baz(); //query 3

//better
$element = $('element'); //query 1
$element.foo();
$element.bar();
$element.baz();

第二件事是您应该始终将 { 与块的开头保持在同一行。在大多数语言中，这无关紧要，并且在很多情况下它可以在 JavaScript 中工作，但由于分号插入，最好让你的 { 在同一行。

//one example of why this is bad
return
{
    "foo": "bar"
};

//The above actually becomes
return;
{
    "foo": "bar"
};

//should have actually been
return {
    "foo": "bar"
};

我注意到的最后一件事是，当单击相应的标签时，您让 javascript 关注每个输入。这实际上可以在没有 JavaScript 的情况下完成。您需要做的就是将 for 属性添加到您的标签中。它们应该设置为相应输入的 id。

<!-- from this -->
<label id="passwordLabel">Password</label>
<input id="password" type="password">

<!-- to this -->
<label id="passwordLabel" for="password">Password</label>
<input id="password" type="password">

无论如何，只要您修复了您的 html，以下应该可以解决问题。

//Wait for the page to load
$(function() {
    var $passwordLabel, $confirmpasswordLabel, $password, $confirmpassword;

    //Pre select the form elements
    $passwordLabel = $("#passwordLabel");
    $password = $("#password");
    $confirmpasswordLabel = $("#confirmpasswordLabel");
    $confirmpassword = $("#confirmpassword");

    //bind events for the password input
    $password.focus(function() {
        //on focus hide the label
        $passwordLabel.hide();
    });
    $password.blur(function() {
        if(!$password.val()) {
            //if the input is empty then restore the label on blur
            $passwordLabel.show();
        }
    });

    //bind events for the confirm password input
    $confirmpassword.focus(function() {
        //on focus hide the label
        $confirmpasswordLabel.hide();
    });
    $confirmpassword.blur(function() {
        if(!$confirmpassword.val()) {
            //if the input is empty then restore the label on blur
            $confirmpasswordLabel.show();
        }
    });
});​

如果您想查看一些工作代码，我用上面的示例和一些示例输入为您制作了一个 jsFiddle：http: //jsfiddle.net/wef85/8/

于 2012-06-03T06:44:05.247 回答
0

非常感谢您回答问题。

我相信我们之前的代码没有逻辑错误。我应用了您的代码，但它仍然表现相同......我认为 jQuery 版本 1.3.2 和 1.6.4 存在问题，因为我们同时使用它们。

让我为这个问题添加一点信息，这可能是问题的原因：

我们正在构建一个需要使用 jQuery 进行验证的注册页面。在那个页面上，我们还使用了 jQuery 滑块。

所以页面结构看起来像这样：

请检查这张图片：http: //img72.imageshack.us/img72/1111/structured.png

  1. Landing-header.php（包括 jQuery-1.6.4.min.js 和滑块代码）

  2. login-page.php（包括landing-header.php，包括jQuery.js（jQuery 1.3.2）和表单验证代码-包括密码字段）

所以我们使用landing-page.php 来测试页面（其中也包括landing-header.php）。

问题是，当我们包含 jQuery 1.3.2 时，密码标签确实会重新出现，但是来自landing-header.php 的滑块不起作用。

当我们删除包含 jQuery 1.3.2 时，滑块动画效果很好，但即使使用您的代码，密码标签也不会重新出现。

于 2012-06-03T07:52:38.077 回答