调试从 jQuery 1.4.4 到 1.6.4 的代码 - 因升级而损坏

Question

好的，提前为发布大量代码表示歉意！

我的问题是这样的：我不是 jQuery 小开发周期方面的专家，任何人都可以发现这段代码中的任何内容会使其与 jQuery 1.6.4 不兼容吗？

该代码最初是为 jQuery 1.4.4 编写的，因此我正在寻找 1.4.4 和 1.6.4 之间会影响以下代码的任何更改：

$(document).ready(function() { //when the document is ready...


//save selectors as variables to increase performance
var $window = $(window);
var $firstBG = $('#first');
var $firstGrid = $('#first .grid');
var $secondBG = $('#second');
var $thirdBG = $('#third');
var $fourthBG = $('#fourth');
var trainers = $("#second .bg");

var windowHeight = $window.height(); //get the height of the window


//apply the class "inview" to a section that is in the viewport
$('#first, #second, #third, #fourth').bind('inview', function (event, visible) {
        if (visible == true) {
        $(this).addClass("inview");
        } else {
        $(this).removeClass("inview");
        }
    });

//function that is called for every pixel the user scrolls. Determines the position of the background
/*arguments: 
    x = horizontal position of background
    windowHeight = height of the viewport
    pos = position of the scrollbar
    adjuster = adjust the position of the background
    inertia = how fast the background moves in relation to scrolling
*/
function newPos(x, windowHeight, pos, adjuster, inertia){
    return x + "% " + (-((windowHeight + pos) - adjuster) * inertia)  + "px";
}

//function to be called whenever the window is scrolled or resized
function Move(){ 
    var pos = $window.scrollTop(); //position of the scrollbar

    //if the first section is in view...
    if($firstBG.hasClass("inview")){
        //call the newPos function and change the background position
        $firstBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 750, 0.3)}); 
    }

    //if the second section is in view...
    if($secondBG.hasClass("inview")){
        //call the newPos function and change the background position
        $secondBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
        //call the newPos function and change the secnond background position
        trainers.css({'backgroundPosition': newPos(50, windowHeight, pos, 1900, 0.6)});
    }

    //if the third section is in view...
    if($thirdBG.hasClass("inview")){
        //call the newPos function and change the background position
        $thirdBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 2850, 0.3)});
    }

    //if the fourth section is in view...
    if($fourthBG.hasClass("inview")){
        //call the newPos function and change the background position for CSS3 multiple backgrounds
        $fourthBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 200, 0.9) + ", " + newPos(50, windowHeight, pos, 0, 0.7) + ", " + newPos(50, windowHeight, pos, 0, 0.5) + ", " + newPos(50, windowHeight, pos, 700, 0.3)});
    }

    $('#pixels').html(pos); //display the number of pixels scrolled at the bottom of the page
}

$window.resize(function(){ //if the user resizes the window...
    Move(); //move the background images in relation to the movement of the scrollbar
});     

$window.bind('scroll', function(){ //when the user is scrolling...
    Move(); //move the background images in relation to the movement of the scrollbar
});

});

Answer 1

您绝对应该检查控制台。
在 Safari 或 Chrome 中，右键单击页面内的任意位置并选择“检查元素”。这将带来开发人员工具，即使您不是专家，您也会发现它们非常有用。

然后转到控制台，您将看到是否发生任何错误。使用 jQuery，如果应该发生某些事情但没有发生，并且控制台中没有错误，则几乎总是意味着您通过 id 或调用引用了不存在的 html 标签。如果您执行类似 $('#divIdName').hide() 的操作，但您有 < div id="divIdName_slightlyDiffent">在你的 DOM 中，该行不起作用，但也不会抛出任何错误。

我在您的代码中没有看到任何已弃用的函数，因此您应该真正检查控制台和拼写错误。如果您所做的唯一更改是 jQuery 版本，则可能某些函数的某些内部行为发生了更改，但如果是这种情况，您应该保持警惕。

Answer 2

对于这个特定问题，插件 jQuery Parallax 已过时。更新到 jQuery parallax v1.1 解决了这个问题，但作者已经删除了它（我认为）。如果您正在使用该插件，这对明智的人来说是一句话。

Answer 3

首先，您有一些简单的语法错误。

.bind('inview', /* ... */

缺少结束括号 )。

另外，我建议用 attr()、prop() 或 val() 替换一些 .css() >。