javascript - 单击按钮时我无法增加变量的值

Question

我只想这样做:(index++ 或 index-- 单击按钮时)但它的值不会改变(始终为零)。我想我不能转移一些值(value)观。一定是增加还是减少？？有两个功能。一个是增加我的索引变量，另一个是减少它。但最终索引保持为 0。

$(document).ready(function () {
    "use strict";

    const carousel_baslik = $(".carousel-baslik")[0];
    const carousel_metin = $(".carousel-metin")[0];
    const carousel_image = $(".carousel-image")[0];
    const counter = $("#counter")[0];
    const icon = $("#icon-ground")[0];
    const controller1 = $(".carousel-controller")[0];
    const controller2 = $(".carousel-controller")[1];
    var index = 0;

    class Request {
        get(url) {
            return new Promise((resolve, reject) => {
                fetch(url).then(res => res.json()).then(data => resolve(data)).catch(err => reject(err));
            })
        }
    }
    const Requesting = new Request();
    Requesting.get("js/carousel.json").then(data => {
        const slides = data.length;

        controller1.addEventListener("click", function (slideCount) {
            geri(slides);
        });
        controller2.addEventListener("click", function (slideCount) {
            ileri(slides);
        });
        add(data);
    });

    function geri(slideCount) {
        index--;
        showSlides(slideCount);
        console.log("index:" + " " + index);
        console.log("slideCount:" + " " + slideCount);
    }

    function ileri(slideCount) {
        index++;
        showSlides(slideCount);
        console.log("index:" + " " + index);
        console.log("slideCount:" + " " + slideCount);
    }

    function showSlides(slideCount) {
        index = slideCount;
        if (index < 0) {
            index = slideCount - 1;
        }
        if (index >= slideCount) {
            index = 0;
        }
        // console.log(index);
    }

    function add(data) {
        carousel_baslik.textContent = data[index].baslik;
        carousel_metin.innerHTML = data[index].metin;
        carousel_image.src = data[index].image;
        counter.textContent = data[index].count;
        const img = document.createElement("img");
        img.src = data[index].icon;
        img.className = "w-100";
        img.alt = "";
        icon.appendChild(img);
    }
});

结果:索引始终为 0

我的最后一次编辑(索引增加和减少但数据不添加到 HTML):

$(document).ready(function () {
    "use strict";

    const carousel_baslik = $(".carousel-baslik")[0];
    const carousel_metin = $(".carousel-metin")[0];
    const carousel_image = $(".carousel-image")[0];
    const counter = $("#counter")[0];
    const icon = $("#icon-ground")[0];
    const controller1 = $(".carousel-controller")[0];
    const controller2 = $(".carousel-controller")[1];
    var index = 0;

    class Request {
        get(url) {
            return new Promise((resolve, reject) => {
                fetch(url).then(res => res.json()).then(data => resolve(data)).catch(err => reject(err));
            })
        }
    }
    const Requesting = new Request();
    Requesting.get("js/carousel.json").then(data => {
        controller1.addEventListener("click", geri);
        controller2.addEventListener("click", ileri);
        add(data);
    });


    function add(data) {
        carousel_baslik.textContent = data[index].baslik;
        carousel_metin.innerHTML = data[index].metin;
        carousel_image.src = data[index].image;
        counter.textContent = data[index].count;
        const img = document.createElement("img");
        img.src = data[index].icon;
        img.className = "w-100";
        icon.appendChild(img);
    }

    function geri() {
        index--;
        console.log(index);

    }

    function ileri() {
        index++;
        console.log(index);
    }

});

Answer 1

你在增加和减少index ，但在此之后不久，您将其重新设置为 showSlides函数，当你设置 index = slideCount , 所以你所有的工作都丢失了。