Question

我在This Demo有一个简单的自定义jQuery Spinner，它对我来说很好，但是我在将值重置为initial时遇到了问题。从演示和以下代码中可以看到，我可以将#targeteg的文本设置为.html(targets[0]);，但如果您启动+或-，计数器将再次继续在设定值计数之前！

var targets = ["Target KM", "1,000 km", "3,000 km", "5,000 km", "7,000 km"];
var i = 0;
$("#plus").on("click", function () {
 if (i < 4) {
       $("#targeteg").html(targets[++i]);
 }
});
$("#minus").on("click", function () {
 if (i > 0) {
        $("#targeteg").html(targets[--i]);
  }
});
$("#resetForm").on("click", function () {
 mapReset();
 function mapReset() {
  $("#targeteg").html(targets[0]);
 }
});

你可以告诉我如何解决这个问题，然后重新开始重新设置每件事情就像重新加载页面时间一样。感谢

Answer 1

只需在i=0功能

中设置reset即可

function mapReset() {
    i = 0;
    $("#targeteg").html(targets[0]);
}

Working Demo

Answer 2

您的索引i决定了“当前”项目。问题是您没有在mapReset()函数中重置此索引。您还需要在“翻转”项目总数后更改索引，或者进入底片。以下是应该按预期工作的更新代码：

$(document).ready(function() {

    var targets = ["Target KM", "1,000 km", "3,000 km", "5,000 km", "7,000 km"];
    var i = 0;

    $("#plus").on("click", function () {
        i++;

        if (i >= targets.length) {
            i = targets.length - 1; // Display the last item if we're at the end of the list
        }

        $('#targeteg').html(targets[i]);
    });

    $("#minus").on("click", function () {
        i--;

        if (i < 0) {
            i = 0; // Display the first item if we're at the beginning of the list
        }

        $('#targeteg').html(targets[i]);
    });

    // This function should be outside of any event handler, except perhaps a document.ready event
    function mapReset() {
        i = 0;
        $("#targeteg").html(targets[0]);
    }

    $("#resetForm").on("click", function () {
        mapReset();
    });

});

关于重置自定义jQuery Spinner的问题

2 个答案: