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

【问题标题】：how to add next and previous button on my lightbox div如何在我的灯箱 div 上添加下一个和上一个按钮
【发布时间】：2017-04-04 19:14:05
【问题描述】：

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

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

在我的灯箱里。有没有一种简单的方法可以在灯箱内添加下一个和上一个按钮。当我单击下一个按钮时，它会打开下一个带有下一个和上一个按钮的 cont-href 框，与上一个按钮相同。

 $(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>

【问题讨论】：

灯箱不是为您设置的吗？您需要做的就是复制和粘贴。至少我记得它是这样的。你也应该尝试格式化你的代码。
如何设置格式可以指导我我是新来的.... :/
@Ruddy 我不认为 OP 正在使用库，但是是的：github.com/lokesh/lightbox2 确实/可以
这是我的灯箱link

标签： jquery html css

【解决方案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/

【讨论】：

【解决方案2】：

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

【讨论】：