JavaScript 'reset' 函数无法正常工作

Question

为什么我需要点击两次才能在“重置”后更改类别？我该如何解决这个问题？

期望的结果是使函数返回到初始状态并正常循环数组。下面是演示。

$(function () {
    var weights = ["jHairline", "jThin", "jLight", "jMedium"];
    var currentIndex = 0;
    $('#text').on('click', function (e) {
        $("h1").removeClass().addClass(weights[currentIndex]);
        $("h1").html(weights[currentIndex]);

        if (currentIndex == weights.length - 1)
           currentIndex = 0;
        else
            currentIndex++;

        e.preventDefault();
    });

    $('#reset').click(function () {
        currentIndex = 0;

        $("h1").removeClass().addClass(weights[currentIndex]);
        $("h1").html(weights[currentIndex]);
    });
});

Demo

Answer 1

因为您将其重置为 0 并且在下次更新时不会增加它。快速解决办法是

 $('#reset').click(function() {
    currentIndex = 0;

    $("h1").removeClass().addClass(weights[currentIndex]);
    $("h1").html(weights[currentIndex]);
    currentIndex=1;
  });

正确的方法是在 $('#text').on('click', function(e) { 函数的开头进行递增

--编辑澄清请求--
我个人建议这样写:

$(function () {
    var weights = ["jHairline", "jThin", "jLight", "jMedium"];
    var currentIndex = -1;
    $('#text').on('click', function (e) {
        currentIndex=(currentIndex+1)%weights.length;
        $("h1").removeClass().addClass(weights[currentIndex]);
        $("h1").html(weights[currentIndex]);

        e.preventDefault();
    });

    $('#reset').click(function () {
        currentIndex = 0;

        $("h1").removeClass().addClass(weights[currentIndex]);
        $("h1").html(weights[currentIndex]);
    });
});

我添加/修改的两行是 var currentIndex = -1; 和 currentIndex=(currentIndex+1)%weights.length; 。

因此，本质上，当 text.click 函数启动时，您将数字加 1。如果你一开始就从-1开始，那么当text.click进入时，它会将其增加到0。并且在reset中将其设置为0将确保下次运行text.click时它会增加到1。

此外，

 if (currentIndex == weights.length - 1)
           currentIndex = 0;
        else
            currentIndex++;

写成 currentIndex=(currentIndex+1)%weights.length; 会更加简洁和清晰。它会将数字加 1，然后进行修改(除法时取余数)，以便在达到weight.length 时将其循环回 0。