Question

我不知道如何解决这个问题。我根本不知道javascript来调试或理解其他文章/线程。要显示错误，请单击一个不是前两个项目的项目，然后您将在控制台中看到它。

我有项目：

'zeckoshop' : {
            'title' : 'zeckoShop',
            'description' : 'An all-in-one ecommerce platform designed to seamlessly integrate with your business operations.',
            'link' : 'http://darrenbachan.com/playground/zeckoshop/index.html',
            'images': [
                '/images/zeckoshop/zeckoshop-1.jpg'
            ],
            'tags': [
                'Web Design',
                'Web Development'
            ],
            'process-description' : 'An all-in-one ecommerce platform designed to seamlessly integrate with your business operations.',
            'process-wireframes': [
                '/images/zeckoshop/zeckoshop-1.jpg'
            ]
        },

        'diamond-hand-car-wash' : {
            'title' : 'Diamond Hand Car Wash',
            'description' : 'Feeling luxurious is only one car wash away.',
            'link' : 'http://darrenbachan.com/playground/diamond-hand-car-wash/index.html',
            'images': [
                '/images/diamond-hand-car-wash/diamond-1.jpg'
            ],
            'tags': [
                'Web Design',
                'Web Development'
            ],
            'process-description' : 'test',
            'process-wireframes': [
                '/images/zeckoshop/zeckoshop-1.jpg'
            ]
        },

        'edutravel-for-credit' : {
            'title' : 'EduTravel For Credit',
            'description' : 'Innovative travel for credit. Completely engage in your learning through exploration and discovery.',
            'link' : '',
            'images': [
                '/images/edutravel-for-credit/edu-1.jpg',
                '/images/edutravel-for-credit/edu-2.jpg',
                '/images/edutravel-for-credit/edu-3.jpg',
                '/images/edutravel-for-credit/edu-4.jpg'
            ],
            'tags': [
                'Web Design',
                'Newsletter'
            ]
        },

由于'process-description'和'process-wireframes'不在项目'edutravel-for-credit'上，因此会产生此错误。

提取此内容的代码是：

if($('#process-description').length) {
            $('#process-description').html(projectData['process-description']).show();
        } else {
            $('#process-work').hide();
        }
        $('#process-wireframes').empty('');

        $.each(projectData['process-wireframes'], function(item) {
            $('#process-wireframes').append('<div class="project-gallery"><img src='+projectData['process-wireframes'][item]+' /></div>')
        });

它将内容吐入这个html：

<div id="process-work">
    <h2 id="process-title">Process Work</h2>
    <p id="process-description"></p>
    <div id="process-wireframes"></div>
</div>

我实际上不知道如何调试此问题，可以使用我可以获得的任何帮助。无论是在这里还是在skype会议上。我需要拼命地显示这些内容。

Answer 1

我没有看到chrome上的控制台错误。尽管控制台出错，项目是否正确加载？我想知道是否是由于hacky .length调用来检查元素是否存在。但是，为了帮助您了解正在发生的事情......

您拨打.length的唯一地方就在这行代码中：

if($('#process-description').length) {

因此，某种程度上$('#process-description')未定义。这是jQuery使用ID“process-description”检索html元素的方法，即使它显然在HTML中。所以要么没有加载jQuery，在这种情况下我会期望$ is not a function的编译错误或不存在的元素不会导致控制台错误，因此您需要向我们提供更多信息。

Answer 2

在尝试迭代它之前测试该属性是否存在。

if (projectData['process-wireframes']) {
    $.each(projectData['process-wireframes'], function(item) {
        $('#process-wireframes').append('<div class="project-gallery"><img src='+projectData['process-wireframes'][item]+' /></div>')
    });
}

发生错误的原因是$.each的代码以：

开头

each: function( obj, callback, args ) {
    var value,
        i = 0,
        length = obj.length,
        isArray = isArraylike( obj );

未定义obj时，行length = obj.length会出错。

未捕获的TypeError：无法读取未定义的属性“长度” - 无法修复/调试此问题

2 个答案: