$('.close').on 不是函数

Question

我正在尝试在页面加载后添加横幅。我正在使用下面的代码，在 JSFiddle 中“关闭”按钮正在工作，但在我的网站上却没有。它说“$('.close').on 不是函数”。我认为这是因为我不使用外部 jQuery 文件，因为它破坏了我的页面。没有外部jQuery可以做到吗？还是只用 JS？

$( document ).ready(function() {
  $('.open').fadeIn();
    
  $('.close').on('click', function(event) {
    event.preventDefault();
	/* Act on the event */
        
    $('.open').fadeOut();
        
  });
});

.open {position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 99999; display: none; opacity: 1; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in;width: 561px; height: 274px; margin: auto}

.close {background: #000; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px}

.close:hover {background: #fff; color: #000}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="popup" class="open">
<a href="#"><img src="https://image.zootlab.cz/cache2/scale/561x277/000/000/003/434/3434017.jpeg" /></a>
<a class="close" title="Zavřít" href="#close">X</a>
</div>

Answer 1

在没有 jquery 的情况下这样使用它

document.getElementById("popup").style.display = "block";

document.getElementById("closeBtn").addEventListener("click", closeDialog);

function closeDialog () {
   document.getElementById("popup").style.display = "none";
}

document.getElementById("popup").style.display = "block";

document.getElementById("closeBtn").addEventListener("click", closeDialog);

function closeDialog () {
   document.getElementById("popup").style.display = "none";
}

.open {position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 99999; display: none; opacity: 1; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in;width: 561px; height: 274px; margin: auto}

.close {background: #000; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px}

.close:hover {background: #fff; color: #000}

<div id="popup" class="open">
<a href="#"><img src="https://image.zootlab.cz/cache2/scale/561x277/000/000/003/434/3434017.jpeg" /></a>
<a class="close" title="Zavřít" href="#close" id="closeBtn">X</a>
</div>

对于过渡效果，这样做

setTimeout(function() {
  document.getElementById("popup").style.opacity = 1;
}, 0);

function closeDialog() {
  document.getElementById("popup").style.opacity = 0;
}

#popup.open {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 99999;
  display: block;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  width: 561px;
  height: 274px;
  margin: auto
}

.close {
  background: #000;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px
}

.close:hover {
  background: #fff;
  color: #000;
}

<div id="popup" class="open">
  <a href="#"><img src="https://image.zootlab.cz/cache2/scale/561x277/000/000/003/434/3434017.jpeg" /></a>
  <a class="close" title="Zavřít" href="#close" onclick="closeDialog()">X</a>
</div>