jquery - 使用 jQuery 在单击时淡出 2 个元素

Question

我试图在按下关闭按钮时同时淡出全屏覆盖和信息框 div，由于某些原因，下面的代码无法正常工作。预先感谢您的帮助，我是 JQuery 的菜鸟!

CSS:

.full_page_overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background: #626262;
    opacity: 0.9;
    z-index: 2147483646;
}

.cart_over {
    width: 60%;
    height: 60%;
    margin-top: 20%;
    margin-left: 20%;
    position: fixed;
    float: left; 
    border: 1px solid black;
    box-shadow: 1px 1px 10px black;
    background: white;
    z-index: 2147483647;
    border-radius: 10px;
}

HTML:

<div class="full_page_overlay"></div>
  <div class="cart_over">
      <a href="#" id="close_box">Close</a>
  </div>

jQuery:

$( document ).ready(function() {
    $("#close_box").click(function(){
    $("#full_page_overlay").fadeOut();
    $("#cart_over").fadeOut();
})
});

Answer 1

$( document ).ready(function() {
    $("#close_box").click(function(){
    $(".full_page_overlay").fadeOut();
    $(".cart_over").fadeOut();
})
});

这是因为您使用散列标签来引用元素 - 散列标签 # 通过 ID 查找元素，点 . 通过类名查找元素。

Try jQuery是一个非常好的免费资源，可以帮助您学习基础知识。它是免费的，您唯一需要的就是浏览器。