Question

Tôi gặp phải lỗi javascript khá khó chịu. Nổi tiếng thế giới:

uncaught TypeError: Cannot read property "top" of null

Đây là mã:

$(function() { 

var setTitle = function(title, href) { 
     title = 'Derp: ' + title; 
     href = href || ''; 

     history.pushState({id: href}, title, href.replace('#', '/')); 
     document.title = title; 
    }, 
    scroll = function(url, speed) { 

     var href = typeof url == 'string' ? url : $(this).attr('href'), 
      target = $(href), 
      offset = target.offset(), 
      title = target.find('h1').text(); 

     if(typeof url == 'number') { 
      target = [{id:''}]; 
      offset = {top: url}; 
     } 

     // And move the element 
     if(offset.top) { 
      // Set the new URL and title 
      setTitle(title, href); 

      // Make sure we're not moving the contact panel 
      if(target[0].id != 'contact') { 
       $('html, body').animate({scrollTop: offset.top}, speed); 
      } 
     } 

     return false; 
    }; 

// Handle existing URL fragments on load 
if(location.pathname.length > 1) { 
    scroll(location.pathname.replace('/', '#'), 0); 
} 

$('a#logo').click(function() { 
    $('html,body').animate({scrollTop: 0}); 
    return false; 
}); 

// Handle internal link clicks 
$('a[href^=#]:not(#logo)').click(scroll); 


// Close the "Get In Touch" box 
var box = $('#contact'), 
    moveBox = function() { 
     var closing = $(this).attr('class') == 'close', 
      amount = closing ? -(box.height() + 20) : 0, 
      cb = closing ? '' : function() { box.animate({marginTop: -10}, 150); }; 

     box.animate({marginTop: amount}, cb); 
    }; 

box.css('margin-top', -(box.height() + 20)); 
$('#contact a.close, #get-in-touch').click(moveBox); 


// Nasty little fix for vertical centering 
$('.vertical').each(function() { 
    $(this).css('margin-top', -($(this).height()/2)); 
}); 


// Work panels 
var parent = $('#work'), 
    panels = parent.children('div'); 

panels.each(function() { 
    $(this).css('width', 100/panels.length + '%'); 
}) 

parent.css('width', (panels.length * 100) + '%'); 


// Bind the keyboards 
$(document).keyup(function(e) { 
    var actions = { 
     // Left 
     37: function() { 
      var prev = panels.filter('.active').prev().not('small'); 

      if(prev.length > 0) { 
       prev.siblings().removeClass('active'); 

       setTitle(prev.find('h1').text(), prev[0].id); 

       setTimeout(function() { 
        prev.addClass('active'); 
       }, 250); 

       parent.animate({left: '+=100%'}).css('background-color', '#' + prev.attr('data-background')); 
      } 
     }, 

     // Right 
     39: function() { 
      var next = panels.filter('.active').next(); 

      if(next.length > 0) { 
       next.siblings().removeClass('active'); 

       setTitle(next.find('h1').text(), next[0].id); 

       setTimeout(function() { 
        next.addClass('active'); 
       }, 250); 

       parent.animate({left: '-=100%'}).css('background-color', '#' + next.attr('data-background')); 
      } 
     }, 

     // Down 
     40: function() { 
      var w = $(window), 
       height = w.height() * panels.children('div').length, 
       h = w.height() + w.scrollTop(); 

      if(h < height) { 
       scroll(h); 
      } 
     }, 

     // Up 
     38: function() { 
      var w = $(window); 
      $('html,body').animate({scrollTop: w.scrollTop() - w.height()}); 
     } 
    }; 

    // Call a function based on keycode 
    if(actions[e.which]) { 
     actions[e.which](); 
    } 

    e.preventDefault(); 
    return false; 
}); 


// Fix crazy resize bugs 
$(window).resize(function() { 

    var m = $(this), 
     h = m.height(), 
     s = m.scrollTop(); 

    if((h - s) < (h/2)) { 
     m.scrollTop(h); 
    } 

    //$('html,body').animate({scrollTop: s}); 
}); 


// slideshow 
var woof = function() { 
     var slides = $('#molly li'), 
      active = slides.filter('.active'); 

     if(!active.length) { 
      active = slides.last(); 
     } 

     active.addClass('active'); 

     var next = active.next().length ? active.next() : slides.first(); 

     next.css('opacity', 0).addClass('active').animate({opacity: 1}, function() { 
      active.removeClass('active last-active'); 
     }); 
    }; 

setInterval(woof, 3000); 


// easing 
$.easing.swing = function(v,i,s,u,a,l) { 
    if((i /= a/2) < 1) { 
     return u/2 * (Math.pow(i, 3)) + s; 
    } 

    return u/2 * ((i -= 2) * i * i + 2) + s; 
}; 

// Change the default .animate() time: http://forr.st/~PG0 
$.fx.speeds._default = 600; 
}); 

try{Typekit.load()}catch(e){} 

Xin lỗi vì con quái vật dài này nhưng tôi nghĩ rằng nó có thể hữu ích để bạn có thể nhìn thấy toàn bộ sự việc. Cảnh báo Lỗi xuất hiện trong phần này:

// And move the element 
     if(offset.top) { 

Uncaught TypeError: Cannot read property 'top' of null

Đó là dòng 23 trong các mã.

Vậy đó. Bạn có thể cho tôi một gợi ý về cách giải quyết vấn đề này không? Cảm ơn bạn!

Answer 1

var href = typeof url == 'string' ? url : $(this).attr('href'), 
target = $(href), //line 2 
offset = target.offset(), //line 3 

Tôi tin rằng điều này phải có một cái gì đó để làm với line 2, target nên null khi lỗi xảy ra

Answer 2

Theo nguồn jQuery, jQuery.fn.offset chỉ trả null nếu:

1. phần tử đầu tiên trong bộ này không tồn tại (bộ trống) hoặc
2. ownerDocument của nó là giả (tôi không biết vi điều đó sẽ xảy ra, xin lỗi).

Tùy chọn đầu tiên dường như có nhiều khả năng hơn, vì vậy bạn nên kiểm tra xem target.length > 0 trước khi gọi target.offset() và xử lý thay thế.