如何使上一个和下一个按钮在 pugjs 中工作？

问题描述

-
    var INDEX = 0;
    const welcomeModalData = [
        {
            image: "welcome-modal-img-1.svg"
        },{
            image: "welcome-modal-img-2.svg",}
    ]

if welcomeModalData[INDEX].image != ""
    img.feature-img#feature-img(src=`${welcomeModalData[INDEX].image}` alt="")
.welcome-modal__footer-paging
    button#prevIoUs-btn(type="button" onclick="onClickPrevIoUsBtn()") PrevIoUs tip
    button#next-btn(type="button" onclick="onClickNextBtn()") Next tip
    p#pageination 1 of #{welcomeModalData.length}

script.
    var prevIoUsBtn = document.getElementById("prevIoUs-btn");
    var nextBtn = document.getElementById("next-btn");
    var featureImg = document.getElementById("feature-img");
    var pageination = document.getElementById("pageination");

    function onClickPrevIoUsBtn()
    {
        if (#{INDEX} > 0) {
            #{INDEX -= 1};
            featureImg.src = "#{welcomeModalData[INDEX].image}";
            pageination.textContent = `#{INDEX+1} of #{welcomeModalData.length}`;
        }
    }

    function onClickNextBtn()
    {
        if (#{INDEX+1} < "#{welcomeModalData.length}") {
            #{INDEX += 1};
            featureImg.src = "#{welcomeModalData[INDEX].image}";
            pageination.textContent = `#{INDEX+1} of #{welcomeModalData.length}`;
        }
    }

这是我在 Pugjs 代码中的欢迎模式。 在这里，我想在单击按钮时更改图像（和文本）。 数据是包含图像和文本的 JSON 数据（在我的示例代码中，我只提供了图像）。 单击PrevIoUs 和Next 按钮时，INDEX 减少和增加，然后将数据显示为JSON 数据处的INDEX。 但是我不知道如何控制 Pugjs 脚本中的 INDEX。 我曾尝试将“Pugjs 变量”和“脚本变量”作为 INDEX。 任何人，你能帮我吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）