0
Jquery Toolsを使用してオーバーレイとして表示している画像とデータがあります。オーバーレイを閉じてオーバーレイ内のデータをクリアするにはどうすればよいですか？
これを開くには、2回クリックする必要があります。オーバーレイを閉じて再び開くと、1番目と2番目の画像とデータが表示されます。私は第2、第3、.....時間をクリックすると、それが唯一の画像やデータを示し願ってい
/**close overlay function**/
function closeNav(id) {
document.getElementById("myNav").style.height = "0%";
}
は、他の画像を表示することができないとdata.How私はこの問題を解決することができますか？
ありがとうございました。
コード：
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 + ")'>×</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>