我的代碼工作jQuery的1.3.2但不是在1.6.4

Question

我有這樣完美的作品上的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不再有這種語法嗎？

Answer 1

你在那裏的美名。

它看起來像你的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/

Answer 2

非常感謝回答這個問題。

我相信我們之前的代碼沒有邏輯錯誤。 我應用了你的代碼，它仍然採取相同的操作... 我認爲jQuery版本1.3.2和1.6.4存在一個問題，因爲我們同時使用它們。

讓我加一點點信息，這個問題可能是問題的原因：

我們正在構建一個需要驗證使用jQuery一個註冊頁面。在那個頁面上，我們也使用jQuery滑塊。

所以頁面結構是這樣的：

請檢查這一形象：http://img72.imageshack.us/img72/1111/structured.png

1. 着陸的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的滑塊不起作用。

當我們刪除include jQuery 1.3.2時，滑塊動畫效果很好，但即使使用您的代碼，密碼標籤也不會再次出現。