Question

当我点击我的HTML页面中应该加载各种时间表的元素时，我收到此错误。

example.js:26 Uncaught TypeError: Cannot read property 'length' of undefined
    at HTMLAnchorElement.<anonymous> (example.js:26)
    at HTMLElement.dispatch (jquery-3.2.1.min.js:1623)
    at HTMLElement.q.handle (jquery-3.2.1.min.js:1585)
(anonymous) @ example.js:26
dispatch @ jquery-3.2.1.min.js:1623
q.handle @ jquery-3.2.1.min.js:1585

这是javascript部分。

    $(function () { //when the DOM is ready
    var times; //declare global variable
    $.ajax({ //set up request
        beforeSend: function (xhr) { //before requesting data
            if (xhr.overrideMimeType) { //if supported
                xhr.overrideMimeType("application/json"); // set MIME to prevent errors
            }
        }
    });
    //funciton that collect data from the json file
    function loadTimetable() { //decalre function
        $.getJSON('data/example.json') //try to collect json data
            .done(function (data) { //if succesful
                times = data; //store in variable
            }).fail(function () { //if a problem: show message
                $('#event').html('Sorry! we couldnt load your time table at the moment');
            });
    }
    loadTimetable(); //call the function

    //CLICK ON TEH EVENT TO LOAD A TIME TABLE
    $('#content').on('click', '#event a', function (e) { //user clicks on place
        e.preventDefault(); //prevent loading page
        var loc = this.id.toUpperCase(); //get value of id attr
        var newContent = "";
        for (var i = 0; i < times[loc].length; i++) { // loop through sessions
            newContent += '<li><span class = "time">' + times[loc][i].time + '</span>';
            newContent += '<a href = "descriptions.html#';
            newContent += times[loc][i].title.replace(/ /g, '-') + '">';
            newContent += times[loc][i].title + '</a></li>';
        }
        $('#sessions').html('<ul>' + newContent + '</ul>'); // Display Time
        $('#event a.current').removeClass('current'); // update selected link
        $(this).addClass('current');
        $('#details').text('');
    });

    //CLICK ON A SESSION TO LEAD THE DESCRIPTION
    $('#content').on('click', '#sessions li a', function (e) { //click on session
        e.preventDefault(); // prevent loading
        var fragment = this.href; //title is in href
        fragment = fragment.replace('#', ' #'); //Add Space before #
        $('#details').load(fragment); //to load info
        $('#sessions a.current').removeClass('current'); //update selected
    });

    //CLICK ON PRIMARY NAVIGATION
    $('nav a').on('click', function (e) { //click on nav
        e.preventDefault(); //prevent loading
        var url = this.href; //get UR: to load
        $('nav a.current').removeClass('current');
        $(this).addClass('current');
        $('#container').remove(); //remove old
        $('#content').load(url + ' #container').hide().fadeIn('slow'); // add new
    });
});

我认为我在项目文件夹中引用其他文件的方式肯定有问题，因为我正在处理一个工作正常的类似项目，但我无法弄清楚我做错了什么。 / p>

Answer 1

解决问题的关键是阅读您未在标题中发布的错误消息部分：

无法读取属性'长度'未定义

这并不是抱怨length财产本身。它告诉你times[loc]没有定义。因此，您需要验证times实际上是一个数组，loc计算该数组的有效索引。

无法读取'长度'的属性，我不知道为什么

1 个答案: