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

那些是不是Ids的课程

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


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

Working demo

Answer 3

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

full_page_overlay和cart_over是类，而不是* id * s。应使用“。”引用它们，而不是“＃”。

使用jQuery点击淡出2个元素

3 个答案: