Uncaught TypeError: ไม่สามารถอ่านคุณสมบัติ 'top' ของ undefined

ขออภัยหากคำถามนี้ได้รับคำตอบแล้ว ฉันได้ลองค้นหาวิธีแก้ไขแล้ว แต่ไม่พบสิ่งที่เหมาะกับรหัสของฉัน ฉันยังใหม่กับ jQuery

ฉันมีเมนูติดหนึบสองประเภทที่แตกต่างกันสำหรับสองหน้าที่ต่างกัน นี่คือรหัสสำหรับทั้งคู่

$(document).ready(function () {
    var contentNav = $('.content-nav').offset().top;
    var stickyNav = function () {
        var scrollTop = $(window).scrollTop();
        if (scrollTop > contentNav) {
            $('.content-nav').addClass('content-nav-sticky');
        } else {;
            $('.content-nav').removeClass('content-nav-sticky')
        }
    };
    stickyNav();
    $(window).scroll(function () {
        stickyNav();
    });
});
$(document).ready(function () {
    var stickyNavTop = $('.nav-map').offset().top;
    // var contentNav = $('.content-nav').offset().top;
    var stickyNav = function () {
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('.nav-map').addClass('sticky');
            // $('.content-nav').addClass('sticky');
        } else {
            $('.nav-map').removeClass('sticky');
            // $('.content-nav').removeClass('sticky')
        }
    };
    stickyNav();
    $(window).scroll(function () {
        stickyNav();
    });
});

ปัญหาของฉันคือโค้ดสำหรับเมนูด้านเหนียวที่ด้านล่างไม่ทำงานเนื่องจากโค้ดบรรทัดที่สองทำให้var contentNav = $('.content-nav').offset().top;เกิดข้อผิดพลาดที่อ่านว่า "Uncaught TypeError: Cannot read property 'top' of undefined" ในความเป็นจริงไม่มีโค้ด jQuery อื่น ๆ ด้านล่างบรรทัดที่สองทำงานได้เลยเว้นแต่จะวางไว้ด้านบน

หลังจากค้นคว้าข้อมูลบางส่วนฉันคิดว่าปัญหาคือ$('.content-nav').offset().topไม่พบตัวเลือกที่ระบุเนื่องจากอยู่ในหน้าอื่น ถ้าเป็นเช่นนั้นฉันไม่สามารถหาทางออกได้

ตรวจสอบว่าวัตถุ jQuery มีองค์ประกอบใด ๆ หรือไม่ก่อนที่คุณจะพยายามชดเชย:

var nav = $('.content-nav');
if (nav.length) {
  var contentNav = nav.offset().top;
  ...continue to set up the menu
}

เอกสารของคุณไม่มีองค์ประกอบใด ๆ ที่มีคลาสcontent-navดังนั้นเมธอด.offset()จะส่งกลับไม่ได้กำหนดซึ่งไม่มีtopคุณสมบัติ

คุณสามารถเห็นตัวเองในซอนี้

alert($('.content-nav').offset());

(คุณจะเห็น "ไม่ได้กำหนด")

เพื่อหลีกเลี่ยงการขัดข้องทั้งรหัสคุณสามารถใช้รหัสดังกล่าวแทน:

var top = ($('.content-nav').offset() || { "top": NaN }).top;
if (isNaN(top)) {
    alert("something is wrong, no top");
} else {
    alert(top);
}

ปรับปรุงซอ .

ฉันรู้ว่านี่เก่ามาก แต่ฉันเข้าใจว่าประเภทข้อผิดพลาดนี้เป็นข้อผิดพลาดทั่วไปสำหรับผู้เริ่มต้นที่จะทำเนื่องจากผู้เริ่มต้นส่วนใหญ่จะเรียกใช้ฟังก์ชันของพวกเขาเมื่อองค์ประกอบส่วนหัวกำลังโหลด เมื่อเห็นว่าไม่มีการแก้ปัญหานี้เลยในชุดข้อความนี้ฉันจะเพิ่มเข้าไป มันเป็นไปได้มากว่าฟังก์ชั่นจาวาสคริปต์นี้ถูกวางไว้ก่อนที่จะเกิดขึ้นจริง html ที่ถูกโหลด โปรดจำไว้ว่าหากคุณเรียกใช้จาวาสคริปต์ของคุณทันทีก่อนที่เอกสารจะพร้อมองค์ประกอบที่ต้องการองค์ประกอบจากเอกสารอาจพบค่าที่ไม่ได้กำหนดไว้

ปัญหาที่คุณมักจะพบคือมีลิงก์บางส่วนในหน้าไปยังจุดยึดที่ไม่มีอยู่ ตัวอย่างเช่นสมมติว่าคุณมีสิ่งต่อไปนี้:

<a href="#examples">Skip to examples</a>

จะต้องมีองค์ประกอบในหน้าที่มีรหัสนั้นตัวอย่างเช่น:

<div id="examples">Here are the examples</div>

ดังนั้นตรวจสอบให้แน่ใจว่าแต่ละลิงก์ในหน้านั้นตรงกันโดยมีจุดยึดที่ตรงกัน

ฉันพบปัญหาที่คล้ายกันและพบว่าฉันกำลังพยายามเอาส่วนท้ายของส่วนท้าย แต่ฉันกำลังโหลดสคริปต์ของฉันใน div ก่อนส่วนท้าย มันเป็นแบบนี้:

<div> I have some contents </div>
<script>
  $('footer').offset().top;
</script>
<footer>This is footer</footer>

ดังนั้นปัญหาคือฉันเรียกองค์ประกอบส่วนท้ายก่อนที่ส่วนท้ายจะโหลด

ฉันกดสคริปต์ของฉันลงด้านล่างส่วนท้ายและมันก็ใช้ได้ดี!

หากข้อผิดพลาดนี้ปรากฏขึ้นทุกครั้งที่คุณคลิกที่<a>แท็ก ลองใช้รหัสด้านล่าง

ถูกต้อง:

<a href="javascript:void(0)">

ความผิดปกตินี้เกิดขึ้นเนื่องจาก href ของคุณถูกตั้งค่าเป็น # ภายใน<a>แท็กของคุณ โดยทั่วไปแอปของคุณพยายามค้นหา href ที่ไม่มีอยู่ วิธีที่ถูกต้องในการตั้งค่า href ว่างแสดงไว้ด้านบน

ไม่ถูกต้อง :

<a href="#">

ฉันมีปัญหาเดียวกัน ("Uncaught TypeError: Cannot read property 'top' of undefined")

ฉันลองใช้วิธีแก้ปัญหาทุกอย่างที่หาได้และพบว่าช่วยได้ แต่แล้วฉันก็พบว่า DIV ของฉันมีสอง ID

ดังนั้นฉันจึงลบ ID ที่สองและใช้งานได้

ฉันหวังว่าจะมีคนบอกให้ฉันตรวจสอบ ID ของฉันก่อนหน้านี้))