如何在我的灯箱div上添加下一个和上一个按钮

Question

请帮我在此灯箱中添加下一个和上一个按钮我想添加

<div id="next">Next</div>
<div id="pre">Prev</div>

在我的灯箱里。是否有一种简单的方法可以在灯箱内添加“下一个”和“上一个”按钮。当我点击下一个按钮时，它会打开下一个前一个按钮并显示下一个和上一个按钮，并且与上一个按钮相同。

 $(document).ready( function () {
    $('.cont-wrap > .cont-lnk').click( function () {
    $(this).addClass('active');
    $('.active > .cont-href, .overlay').show();
    });
    function dDb() {
    $('.active > .cont-href, .overlay').fadeOut();
    $('.cont-lnk').removeClass('active');	
    };
    
    $('.overlay, .close').click( function () {
    	dDb();
    	});
    $('.cont-href').click( function(e){ e.stopPropagation(); e.stopImmediatePropagation(); });
    
    });

body {
    	padding:0;
    	margin:0;
    }
    .cont-lnk {
    	display:block;
    	width:100px;
    	background:#999;
    	height:20px;
    }
    .cont-href {
    display: none;
    position: absolute;
    width: 300px;
    z-index: 1000;
    background: #fff;
    color: #000;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 35%;
    height: 200px;
    }
    .overlay {
    	background:rgba(0, 0, 0, 0.5);
    	position:absolute;
    	width:100%;
    	height:100%;
    	z-index:999;
    	display:none;
    }
    .close {
    	display:block;
    	position:absolute;
    	right:10px;
    	top:10px;
    }
    
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay"></div>
    <div class="mwrap">
    <div class="cont-wrap">
    <div class="cont-lnk">
    Click here
    <div class="cont-href">
    <div class="close"><a href="#">X</a></div>
    box content comes here.....
    <div id="next">next</div>
    <div id="prev">pre</div>
    </div>
    </div>
    </div>
    <div class="cont-wrap">
    <div class="cont-lnk">
    Click here 2
    <div class="cont-href">
    <div class="close"><a href="#">X</a></div>
    box content comes here 2 bla bla.....
    <div id="next">next</div>
    <div id="prev">pre</div>
    </div>
    </div>
    </div>
    </div>

Answer 1

首先在你的小提琴中将next和prev id更改为类（对于多个元素使用相同的id不是一个好习惯），然后添加以下代码：

$(".next").click(function() {
        $('.active > .cont-href, .overlay').hide();
        $(this).closest(".cont-lnk").removeClass('active');
        var currentContWrap = $(this).closest(".cont-wrap");
        var nextContWrap = currentContWrap.next(".cont-wrap");
        nextContWrap.children(".cont-lnk").addClass('active');
        $('.active > .cont-href, .overlay').show();
    });
    $(".prev").click(function() {
        $('.active > .cont-href, .overlay').hide();
        $(this).closest(".cont-lnk").removeClass('active');
        var currentContWrap = $(this).closest(".cont-wrap");
        var prevContWrap = currentContWrap.prev(".cont-wrap");
        prevContWrap.children(".cont-lnk").addClass('active');
        $('.active > .cont-href, .overlay').show();
    });

工作演示：http://jsfiddle.net/hEEFq/

Answer 2

您不能在一个文档页面中使用一次ID。