这更像是一个普遍好奇的问题。
我碰巧有以下 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> 末尾的标签标签。
我很好奇为什么会发生这种情况，以及为什么不总是这样。
最佳答案
因为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();
});
关于javascript - undefined reference - jQuery 选择器与 JavaScript 变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28387253/