为什么.html与$（x）协同工作，但不与x协同工作？

Question

代码：

var zoomPopup = document.getElementById('image-zoom'); 
zoomPopup.hide(); 

一些其他的代码

$('#container').find('.zoomImage').on('click', function() { 
     zoomPopup.show(); 
     $(zoomPopup).html('<img src="/static/on.png" height="64px" width="64px">'); 
     console.log('adres: ' + this.src); 
}); 

如果我尝试写不$()：

zoomPopup.html('<img src="/static/on.png" height="64px" width="64px">'); 

我得到一个错误：

Uncaught TypeError: zoomPopup.html is not a function

为什么？为什么zoomPopup.show()工作正常？

Answer 1

因为你是在jQuery和纯javascript之间进行混合。您只能使用jQuery的：

$(document).ready(function(){ 
    var zoomPopup = $('#image-zoom'); 
    zoomPopup.hide(); 

    $('#container').find('.zoomImage').on('click', function() { 
     zoomPopup.html('<img src="/static/on.png" height="64px" width="64px">').show(); 
     console.log('adres: ' + $(this).attr('src')); 
    }); 
}); 

我敢肯定zoomPopup.show()不工作，还有.hide()方法，因为它们不是DOM元素的方法。由于元素永远不会隐藏，所以您认为show方法有效，但不是。