如何使用js跳过div？-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

491585

文章

251834569

访问

+关注

分类

暂无分类

日期归档

暂无数据

如何使用js跳过div？

发布于2024-12-12 18:10 阅读(743) 评论(0) 点赞(15) 收藏(2)

在将 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网址

解决方案

将类添加到过期的模态框，使用 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>