Мой код работает на 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 к вашим ярлыкам. Они должны быть установлены на идентификатор соответствующего входа.

<!-- 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. destination-page.php (include landing-header.php, include jQuery.js (jQuery 1.3.2) и форма проверки кода - включая поле пароля)

Поэтому мы используем посадочную-page.php, чтобы проверить страницу (которая также включать в себя посадочную-header.php).

Проблема заключается в том, что когда мы включаем jQuery 1.3.2, метка пароля снова появляется, но ползунок с дескриптором header.php не работает.

Когда мы удаляем включенный jQuery 1.3.2, анимация слайдера работает хорошо, но метка пароля не появляется даже при использовании вашего кода.