javascript - 如何将下一个上一个按钮添加到弹出窗口？

Question

我需要将 XML 数据加载到弹出框中的下一个和上一个按钮。单击按钮时，我的代码无法加载 XML 数据。我该如何实现代码。

这是脚本

function xmlParser(xml){
    xml = $(xml).children();
    $(xml).children().each(function () {                    
        let tag = $(this).prop("tagName");
        let image = '<img style="background-image:url(' + $(this).find("image").text() + ')"' + '" />';
        let image2 = '<div><img src="' + $(this).find("image").text() + '" width="100%" alt="' + '" />' + '</div>';
        let head = '<div>' + $(this).find("head").text() + '</div>';


        let html = `<div class="col-sm-4 random" id="random">
                    <a href="#${tag}" id="openModalBtn">
                            <div>${image}</div>
                            <h5>${head}</h5>
                        </a>
                 </div>`;
        let popup = `<div id="${tag}" class="overlay">
                <div class="popup">

                <a href="#${tag}" class="previous round">&#8249;</a>
                <a href="#${tag}" class="next round">&#8250;</a>
                    <h6>${head}</h6>
                    <a class="close" href="#">&times;</a>
                    <div>${image2}</div>
                </div>
            </div>`;


        $("#xmldata").append(html);
        $("#popup").append(popup);
    });
}

Plunker

Answer 1

首先，如果直接使用 tag 名称，div id 就会重复。因此，在 for 循环中使用索引并进行一些简单的计算来获取上一个和下一个项目，例如:

$(xml).children().each(function (idx) {     

    let tag = $(this).prop("tagName");
    let nextIdx = idx + 1;
    let prevIdx = idx - 1;

    //to make cyclic rotation
    nextIdx = nextIdx == total ? 0 : nextIdx;
    prevIdx = prevIdx == -1 ? (total -1) : prevIdx;

    //..........check plunker code

http://next.plnkr.co/edit/Sj188FthvFu6H5uv?open=lib%2Fscript.js