Javascript'；重置'；功能不正常

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

理想的结果是将函数恢复到初始状态，并正常地循环数组。下面是演示

$(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]);
    });
});

---

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

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

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

正确的方法是在

$（'#text'）的开头递增。在（'click'，function（e）{

function

--编辑澄清请求--
以下是我个人推荐的写作方式：

$(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。在重置中将其设置为0将确保下次运行text.click时递增为1

此外

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

---

当写成

currentIndex=（currentIndex+1）%weights.length；

时更简洁明了。它是将数字加1，然后修改（在除法时取余数），以便在达到weight.length时将其循环回0。

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

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

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

正确的方法是在

$（'#text'）的开头递增。在（'click'，function（e）{

function

--编辑澄清请求--
以下是我个人推荐的写作方式：

$(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。在重置中将其设置为0将确保下次运行text.click时递增为1

此外

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

---

当写成

currentIndex=（currentIndex+1）%weights.length；

时更简洁明了。它是在数字上加1，然后修改（除法时取余数），一旦达到weight.length，就将其循环回0。

初始状态表示“weight”或“jHairline”？初始状态表示“weight”或“jHairline”？它起作用了，谢谢。你刚开始提到要修复它。我该怎么做？非常感谢。这种解释真的能帮助像我这样的非程序员正确地理解事情并学习如何改进他们的代码。竖起大拇指！当然：-）很高兴它帮助你解决了问题。谢谢。你刚开始提到要解决这个问题。我该怎么做？非常感谢。这种解释真的能帮助像我这样的非程序员正确理解事情并学习如何改进他们的代码。竖起大拇指！当然：-）很高兴它帮助了你