Question

我使用下划线从列表中的端点部分渲染数据，每个列表项都有一个“了解更多...”的链接。单击该链接将打开一个文本模式/灯箱，显示该特定元素的其余信息。我想添加prev和next箭头以查看列表中项目的其他信息，而无需关闭模式并单击下一项。

我在想这样做的方法是在我选择的元素中添加一个“current”类，并根据需要删除/赋值给每个元素。但我不知道如何去做这件事......（新手在这里，善待）。

HTML

<script type="text/template" id="event-template">
  <div class="event row no-gutter">
    <div class="col-md-12 info">
        <div class="col-md-3">
            <p class="day"><%= day %></p>
        </div>
        <div class="col-md-9">
            <%= month %> at <%= time %>, <%= storename %> <br> <%= city %> <%= state %>

            <a class="show-panel" data-id=<%=entry_id%> href="#_"> Learn More...</a>
        </div>

        <div class="lightbox-panel" id="lightbox-panel-<%=entry_id%>">
            <h2><%= storename %></h2>
            <p><%= month %>, <%= desc %></p>

            <p align="center"><a class="close-panel" href="#_">Close window</a></p>

            <div class="col-md-10" id="prev"><a href="#_">Previous</a></div>
            <div class="col-md-2" id="next"><a href="#_">Next</a></div>
        </div>

    </div>
  </div>
</script>

JS

// Open lightbox
$("#events-placeholder").on("click", ".show-panel", function(e) {
    var entry_id = $(this).attr("data-id");
    $("#lightbox-panel-"+entry_id).fadeIn(300);
     $("body").css("background-color", "black");
});

//Close lightbox
$("#events-placeholder").on("click", "#close-panel", function(e) {
    $(".lightbox-panel").fadeOut(300);
    $("body").css("background-color", "white");
});

// Prev Info
$(".events-placeholder").on("click", "#prev", function(e) {
    // ???
    var current = $(this).attr("data-id");
    var previous = current - 1;
    $("#lightbox-panel-"+entry_id-1).fadeIn(300);


});

// Next Info
$("#events-placeholder").on("click", "#next", function(e) {
// ???

});

如何在文本灯箱/模态中添加“上一个”和“下一个”按钮

0 个答案: