未定义的引用 - jQuery 选择器与 JavaScript 变量

Question

这更像是一个普遍的好奇心问题。

我碰巧有以下 jQuery 代码片段（与我写的许多代码片段相似）：

$(document).ready(function() {
    var light = document.getElementById('light');
    var black = document.getElementById('black_overlay');

    $('#galeria_popup').click(function() {
        light.style.display='block';
        black.style.display='block';
    });

    $('#black_overlay').click(function() {
        light.style.display='none';
        black.style.display='none';
    });
});

这非常有效。然而，之前的迭代是：

$(document).ready(function() {
    $('#galeria_popup').click(function() {
        $('#light').style.display='block';
        $('#black').style.display='block';
    });

    $('#black_overlay').click(function() {
        $('#light').style.display='none';
        $('#black').style.display='none';
    });
});

就我所知，这应该可以工作，除了我在控制台中收到 Undefined reference 错误。

我知道 JavaScript 是异步的，在 DOM 加载时编写和调用代码的顺序很重要。但这都在 $(document).ready 函数内部，<script> 标签位于 <body> 标签的末尾。我很好奇为什么会发生这种情况，为什么不总是这样。

Answer 1

因为jQuery objects，像$('#light')/$('#black')没有style属性。

您需要访问 jQuery object:

中的 DOM 个元素

$('#galeria_popup').click(function() {
    $('#light')[0].style.display='block';
    $('#black')[0].style.display='block';
});

..或

$('#galeria_popup').click(function() {
    $('#light').get(0).style.display='block';
    $('#black').get(0).style.display='block';
});

..或者只使用 jQuery 方法：

$('#galeria_popup').click(function() {
    $('#light, #black').show();
});

未定义的引用 - jQuery 选择器与 JavaScript 变量

Undefined reference - jQuery selector vs JavaScript variables

javascript

jquery

asynchronous

undefined-reference