将div过期代码应用于模式时，我遇到了问题。当某些模式过期时，我需要跳过过期的div以及下一个和上一个按钮正常工作。请帮助我解决问题。
这是我使用的js代码。
$(document).ready(function() {
$(".getAssignment2").click(function() {
var pNode = $(this).closest(".modalDialog"),
id = pNode.prev(".modalDialog").attr("id") ||
$('.modalDialog').last().attr("id");
window.location.href = "#" + id;
});
$(".getAssignment").click(function() {
var pNode = $(this).closest(".modalDialog"),
id = pNode.next(".modalDialog").attr("id") ||
$('.modalDialog').first().attr("id");
window.location.href = "#" + id;
});
});
$(function() {
var current_date = new Date();
$(".with-expiry").each(function() {
var div_date = $(this).data('expiry');
// wrap in Date class
div_date = new Date(div_date);
if(current_date.getTime()>div_date.getTime()){
$(this).hide();
} else {
$(this).show();
}
});
})
这是jsfiddle网址
答案 0 :(得分：1)
答案 1 :(得分：0)
将类添加到过期的模态中，使用nextAll或prevAll检查它们，然后在返回的列表中选择两个函数中的第一个元素。
$(document).ready(function() {
$(".getAssignment2").click(function() {
var pNode = $(this).closest(".modalDialog:not(.expired)");
id = pNode.prevAll(".modalDialog:not(.expired)").first().attr("id") ||
$('.modalDialog').last().attr("id");
window.location.href = "#" + id;
});
$(".getAssignment").click(function() {
var pNode = $(this).closest(".modalDialog:not(.expired)");
id = pNode.nextAll(".modalDialog:not(.expired)").first().attr("id") ||
$('.modalDialog').first().attr("id");
window.location.href = "#" + id;
});
});
$(function() {
var current_date = new Date();
$(".with-expiry").each(function() {
var div_date = $(this).data('expiry');
// wrap in Date class
div_date = new Date(div_date);
if(current_date.getTime()>div_date.getTime()){
$(this).hide();
$(this).addClass('expired');
} else {
$(this).show();
$(this).removeClass('expired');
}
});
}).modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
.getAssignment{
cursor:pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="row">
<div class="col-md-4">
<a href="#openModal3" id="openModalBtn" class="with-expiry" style="display:none" data-expiry="August 05, 2019 12:00:00"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg">open modal3</a>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="#openModal4" id="openModalBtn" class="with-expiry" style="display:none" data-expiry="August 05, 2019 12:00:00"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg">open modal4</a>
</div>
<div class="col-md-4">
<a href="#openModal5" id="openModalBtn"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg">open modal5</a>
</div>
</div>
<a href="#openModal5" id="openModalBtn">open modal5</a>
<div id="openModal1" class="modalDialog">
<div>
<input class="getAssignment2" type="button" value="Previous" id="prev">
<input class="getAssignment" type="button" value="Next" id="next">
<a href="#close" title="Close" class="close">X</a>
<h2>Modal Box 1</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
<div id="openModal2" class="modalDialog">
<div>
<input class="getAssignment2" type="button" value="Previous" id="prev">
<input class="getAssignment" type="button" value="Next" id="next">
<a href="#close" title="Close" class="close">X</a>
<h2>Modal Box 2</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
<div id="openModal3" class="modalDialog with-expiry" style="display:none" data-expiry="August 05, 2015 12:00:00">
<div>
<input class="getAssignment2" type="button" value="Previous" id="prev">
<input class="getAssignment" type="button" value="Next" id="next">
<a href="#close" title="Close" class="close">X</a>
<h2>Modal Box 3</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
<div id="openModal4" class="modalDialog" >
<div>
<input class="getAssignment2" type="button" value="Previous" id="prev">
<input class="getAssignment" type="button" value="Next" id="next">
<a href="#close" title="Close" class="close">X</a>
<h2>Modal Box 4</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
<div id="openModal5" class="modalDialog">
<div>
<input class="getAssignment2" type="button" value="Previous" id="prev">
<input class="getAssignment" type="button" value="Next" id="next">
<a href="#close" title="Close" class="close">X</a>
<h2>Modal Box 5</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
</body>