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();

2 つ目は、常に { をブロックの開始と同じ行に置く必要があるということです。ほとんどの言語ではこれは問題ではなく、多くの場合 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. Landing-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 に答える