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是一个很好的免费资源，可以帮助您学习基础知识。它是免费的，您只需要浏览器即可。

Answer 2

这些是类而不是 ID

# -->  selects Id's
. --> select classe's


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

工作演示

Answer 3

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

full_page_overlay并且cart_over是类，而不是 * id *s。应该使用“.”而不是“#”来引用它们。