如何添加下一個上一個按鈕彈出？

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循環中使用index並進行一些簡單的計算即可獲得上一個和下一個項目，例如：

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