Question

为什么我需要点击两次才能在重置＆＃39;之后更改课程？我该如何解决这个问题？

期望的结果是将函数恢复到初始状态并正常循环通过数组。下面的演示。

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

我添加/修改的2行是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。

Javascript＆＃39;重置＆＃39;功能不正常

1 个答案: