未定义的参考-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对象，例如$('#light') / $('#black')没有style属性。

您需要访问jQuery对象中的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 个解决方案

解决方案1
1 已采纳 2015-02-07 20:55:30

未定义的参考-jQuery选择器与JavaScript变量

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-02-07 20:55:30

解决方案1
1 已采纳 2015-02-07 20:55:30