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

时间:2019-06-19 13:04:46

标签: javascript json promise fetch

我只想这样做:(单击按钮时为index ++或index--),但其值不变(始终为零)。我认为我无法转移一些价值。它必须增加还是减少?有两个功能。一种是增加我的索引变量,另一种是减少它。但最终索引仍为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);
    }

});

1 个答案:

答案 0 :(得分:2)

您正在增加和减少index,但是此后不久,您将其重新设置为showSlides功能,那么当您设置index = slideCount时,您的所有工作都会丢失。 / p>