未定義的參考 - jQuery選擇器與JavaScript變量

這是一個普遍的好奇心問題。未定義的參考 - jQuery選擇器與JavaScript變量

我碰巧有以下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>標籤的末尾。我很好奇爲什麼發生這種情況，爲什麼不總是。

來源

2015-02-07 Deegriz

這是因爲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(); 
});

來源

2015-02-07 20:55:30

所以***我用jQuery選擇的所有內容都將被視爲一個對象，因此沒有可用的CSS屬性？ – Deegriz 2015-02-07 20:58:05

@Digriz基本上包含在'$（）'中的任何東西都是一個jQuery對象。您需要訪問對象內的DOM元素才能訪問某些屬性。http://learn.jquery.com/using-jquery-core/jquery-object/同樣，您不能在常規DOM上使用jQuery方法元素。你可以用'$（）'來包裝它們，以便把它們變成jQuery對象。例如'$（document.getElementById（'light'））;' – 2015-02-07 20:59:13

我想我仍然非常青睞jQuery如何處理事情，但我絕對比大多數時候更喜歡它在vanilla JS上。乾杯! – Deegriz 2015-02-07 21:00:12

未定義的參考 - jQuery選擇器與JavaScript變量

回答

相關問題