搜索
搜索

如何关闭叠加层并清除叠加层中的数据？

debugcn 发表于 Dev
9
Shuan-han Chen

我有一些图像和数据，我使用 Jquery 工具将它们显示为叠加层。

我必须单击两次才能打开它。当我关闭叠加层并再次打开它时，它会显示第一张和第二张图像和数据。

  /**close overlay function**/ 

  function closeNav(id) {

    document.getElementById("myNav").style.height = "0%";

}

我希望当我点击第二次，第三次......时，它只显示图像和数据，不能显示其他图像和数据。我该如何解决这个问题？

谢谢。

代码：

 var APIurl = "http://120.96.86.139/api/Meet_ViewPoint/GET/1";

    $.get(
        APIurl,
        function(data) {
            var i = 0;
            $.each(data, function(key, value) {
                console.log(key + ":" + value)
                var JSONdata = JSON.stringify(data);
                var NumOfJData = JSONdata.length;

                $("#main").append("<div class='box' href='' id='boxmsg" + i + "' onclick='openNav(" + value.View_no + ")'> " +
                    "<div id='ca' class='rss-div-img' ><img width='260vw' height='280vh' " +
                    "href= \"" + value.View_url + value.View_img1 + "\" " +
                    "src= \"" + value.View_url + value.View_img1 + "\"></img>" +
                    "<div style='margin-top:4%;'>【" + value.View_title + "】</div>" +
                    "</div> </div>");
                i++;
            })
        },

        'json'
    );
    
     function openNav(id) {
        var APIurl = "http://120.96.86.139/api/Meet_ViewDet/GET/" + id;
        $.get(
            APIurl,
            function(data) {
                var i = 0;
                $.each(data, function(key, value) {
                    console.log(key + ":" + value)
                    var JSONdata = JSON.stringify(data);
                    var NumOfJData = JSONdata.length;

                    $("#myNav").append("<a href='javascript:void(0)' class='closebtn' id='closebtn' onclick='closeNav(" + "detinfofrom" + id + ")'>&times;</a>" +
                        "<from id='detinfofrom" + id + "'><div class='overlay-content' id='info'>" +

                        "<div style='max-width:80vw;max-heigh:30vh;text-align:center;'><img width='270vw' height='280vh' style='float: left' " +
                        "href= \"" + value.View_url + value.View_img1 + "\" " +
                        "src= \"" + value.View_url + value.View_img1 + "\"></img>" +

                        "<img width='270vw' height='280vh' style='float: left' " +
                        "href= \"" + value.View_url + value.View_img2 + "\" " +
                        "src= \"" + value.View_url + value.View_img2 + "\"></img></div>" +

                        "<a href='#'>" + value.View_cont + "</a></div><from>");

                })
            },

            'json'
        );

        document.getElementById("myNav").style.height = "100%";
    }
    
    
   /**close function**/ 
      function closeNav(id) {

        document.getElementById("myNav").style.height = "0%";

    }
 <link href='http://fonts.googleapis.com/css?family=Cutive' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <style>
    .overlay {
        height: 0%;
        width: 100%;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.9);
        overflow-y: hidden;
        transition: 0.5s;
    }
    
    .overlay-content {
        max-width: 1200px;
        margin: 0 auto;
        margin-top: 8%;
        position: relative;
        width: 100%;
    }
    
    .overlay a {
        margin-top: 2%;
        padding: 8px;
        text-decoration: none;
        font-size: 28px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }
    
    .overlay a:hover,
    .overlay a:focus {
        color: #f1f1f1;
    }
    
    .overlay .closebtn {
        position: absolute;
        top: 20px;
        right: 45px;
        font-size: 60px;
    }
    
    @media screen and (max-height: 450px) {
        .overlay {
            overflow-y: auto;
        }
        .overlay a {
            font-size: 20px
        }
        .overlay .closebtn {
            font-size: 40px;
            top: 15px;
            right: 35px;
        }
    }
    </style>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
 <div id="myNav" class="overlay">
    </div>
    <form class="login-form" method="post" id="login-form">
        <!--<div class="overlay" id="myNav">-->
        <div id="tab" style="margin-top:2%;">
            <div id="main">
            </div>
        </div>
    </form>

迈克尔·科克

innerHTML = ''或$.empty()将清空元素。

function closeNav(id) {

  var myNav = document.getElementById("myNav");

  myNav.style.height = "0%";
  myNav.innerHTML = '';

}


.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 8%;
  position: relative;
  width: 100%;
}

.overlay a {
  margin-top: 2%;
  padding: 8px;
  text-decoration: none;
  font-size: 28px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay {
    overflow-y: auto;
  }
  .overlay a {
    font-size: 20px
  }
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
<link href='http://fonts.googleapis.com/css?family=Cutive' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="myNav" class="overlay">
</div>
<form class="login-form" method="post" id="login-form">
  <!--<div class="overlay" id="myNav">-->
  <div id="tab" style="margin-top:2%;">
    <div id="main">
    </div>
  </div>
</form>

<script>
  var APIurl = "http://120.96.86.139/api/Meet_ViewPoint/GET/1";

    $.get(
        APIurl,
        function(data) {
            var i = 0;
            $.each(data, function(key, value) {
                console.log(key + ":" + value)
                var JSONdata = JSON.stringify(data);
                var NumOfJData = JSONdata.length;

                $("#main").append("<div class='box' href='' id='boxmsg" + i + "' onclick='openNav(" + value.View_no + ")'> " +
                    "<div id='ca' class='rss-div-img' ><img width='260vw' height='280vh' " +
                    "href= \"" + value.View_url + value.View_img1 + "\" " +
                    "src= \"" + value.View_url + value.View_img1 + "\"></img>" +
                    "<div style='margin-top:4%;'>【" + value.View_title + "】</div>" +
                    "</div> </div>");
                i++;
            })
        },

        'json'
    );
    
     function openNav(id) {
        var APIurl = "http://120.96.86.139/api/Meet_ViewDet/GET/" + id;
        $.get(
            APIurl,
            function(data) {
                var i = 0;
                $.each(data, function(key, value) {
                    console.log(key + ":" + value)
                    var JSONdata = JSON.stringify(data);
                    var NumOfJData = JSONdata.length;

                    $("#myNav").append("<a href='javascript:void(0)' class='closebtn' id='closebtn' onclick='closeNav(" + "detinfofrom" + id + ")'>&times;</a>" +
                        "<from id='detinfofrom" + id + "'><div class='overlay-content' id='info'>" +

                        "<div style='max-width:80vw;max-heigh:30vh;text-align:center;'><img width='270vw' height='280vh' style='float: left' " +
                        "href= \"" + value.View_url + value.View_img1 + "\" " +
                        "src= \"" + value.View_url + value.View_img1 + "\"></img>" +

                        "<img width='270vw' height='280vh' style='float: left' " +
                        "href= \"" + value.View_url + value.View_img2 + "\" " +
                        "src= \"" + value.View_url + value.View_img2 + "\"></img></div>" +

                        "<a href='#'>" + value.View_cont + "</a></div><from>");

                })
            },

            'json'
        );

        document.getElementById("myNav").style.height = "100%";
    }
    
    
   /**close function**/ 
      function closeNav(id) {
      
        var myNav = document.getElementById("myNav");

        myNav.style.height = "0%";
        myNav.innerHTML = '';

      }
</script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何缩放ffmpeg filtercomplex中的叠加层？

来自分类Dev

如何从叠加层fs中删除更改？

来自分类Dev

CSS叠加层中的孔

来自分类Dev

限制mapbox中的叠加层

来自分类Dev

如何在叠加层[Angular]中的点击事件中关闭primeng p-overlaypanel

来自分类Dev

如何在html中的叠加层中添加文字？

来自分类Dev

如何在Windows中隐藏Firefox相机图标叠加层

来自分类Dev

如何在视频代码中添加按钮叠加层

来自分类Dev

Android：如何使用片段中的浮动RecyclerView创建叠加层

来自分类Dev

在Dlib中，如何保存带有叠加层的图像？

来自分类Dev

如何从传单的L.control中删除叠加层

来自分类Dev

如何在视频标签中添加按钮叠加层

来自分类Dev

如何在 Android 中创建“始终在顶部叠加层”

来自分类Dev

Android Studio叠加层

来自分类Dev

如何设置核心叠加层的样式？

来自分类Dev

如何使标记叠加层可点击

来自分类Dev

如何在Fancybox叠加层内滚动？

来自分类Dev

如何使用Leaflet隐藏叠加层

来自分类Dev

如何使叠加层适合其他图像

来自分类Dev

如何通过CSS添加图像叠加层？

来自分类Dev

如何在叠加层上方显示元素？

来自分类Dev

传单：我如何否决打开叠加层？

来自分类Dev

避免在Google地图叠加层中重叠

来自分类Dev

在固定位置叠加层中滚动

来自分类Dev

从自举扩展中绘制UI叠加层

来自分类Dev

Android图像叠加层中的XML布局

来自分类Dev

避免在Google地图叠加层中重叠

来自分类Dev

在覆盖背景图片的叠加层上清除文字？

来自分类Dev

在覆盖背景图片的叠加层上清除文字？

Related 相关文章

  1. 1

    如何缩放ffmpeg filtercomplex中的叠加层？

  2. 2

    如何从叠加层fs中删除更改？

  3. 3

    CSS叠加层中的孔

  4. 4

    限制mapbox中的叠加层

  5. 5

    如何在叠加层[Angular]中的点击事件中关闭primeng p-overlaypanel

  6. 6

    如何在html中的叠加层中添加文字？

  7. 7

    如何在Windows中隐藏Firefox相机图标叠加层

  8. 8

    如何在视频代码中添加按钮叠加层

  9. 9

    Android：如何使用片段中的浮动RecyclerView创建叠加层

  10. 10

    在Dlib中，如何保存带有叠加层的图像？

  11. 11

    如何从传单的L.control中删除叠加层

  12. 12

    如何在视频标签中添加按钮叠加层

  13. 13

    如何在 Android 中创建“始终在顶部叠加层”

  14. 14

    Android Studio叠加层

  15. 15

    如何设置核心叠加层的样式？

  16. 16

    如何使标记叠加层可点击

  17. 17

    如何在Fancybox叠加层内滚动？

  18. 18

    如何使用Leaflet隐藏叠加层

  19. 19

    如何使叠加层适合其他图像

  20. 20

    如何通过CSS添加图像叠加层？

  21. 21

    如何在叠加层上方显示元素？

  22. 22

    传单：我如何否决打开叠加层？

  23. 23

    避免在Google地图叠加层中重叠

  24. 24

    在固定位置叠加层中滚动

  25. 25

    从自举扩展中绘制UI叠加层

  26. 26

    Android图像叠加层中的XML布局

  27. 27

    避免在Google地图叠加层中重叠

  28. 28

    在覆盖背景图片的叠加层上清除文字？

  29. 29

    在覆盖背景图片的叠加层上清除文字？

热门标签

归档