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变量

1 个答案: