调试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（）但您有＆lt; div id =“divIdName_slightlyDiffent”＆gt;在你的DOM中，该行不起作用，但也不会抛出任何错误。

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

Answer 2

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

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

缺少结束括号)。

另外，我建议将.css()替换为attr()，prop()或val()。

Answer 3

对于此特定问题，插件jQuery Parallax已过时。更新到jQuery parallax v1.1解决了这个问题，但作者已将其删除（我认为）。如果您正在使用该插件，那么这就是明智的话。