带进度条的多步计算器不起作用

-4

我是一个HTML，CSS和JavaScript的新手，现在我遇到了一个问题，我被卡住了。带进度条的多步计算器不起作用

我的问题是，当我点击旁边转到下一个div我的进度条不起作用，但我得到下一个div。

我看到类似于我的解决方案，但他们也有问题，进度条跳转到最后一步而不是“下一步”。下面是解我指的是： Multi-step form "next" button not working

// Script till next action knappen och step indicator 
$(document).ready(function(){ 
    var current_fs = "active"; 
    var next_fs = 1; 
$('#next').click(function() { 
current_fs = $(this).parent(); 
    next_fs = $(this).parent().next(); 
    $('.current').removeClass('current').hide() 
     .next().show().addClass('current'); 
    $('#progressbar li').eq($("current").index(next_fs)).addClass("active"); 
    if ($('.current').hasClass('last')) { 
     $('#next').attr('disabled', true); 
    } 
    $('#prev').attr('disabled', null); 
});

来源

2014-02-27 simsalabim33

[欢迎使用堆栈溢出]（http://stackoverflow.com/tour）。请解释什么不符合你的期望，以及你到目前为止所尝试过的。 – Jonathan

你的小提琴代码是使用jQuery，但你不包括jQuery。 – Bic

对不起，我的小提琴是坏的，我的代码看起来不像那样。但是，如果你检查我引用的主题，并测试最后一个小提琴在那里发布，我有一个类似的解决方案，在该解决方案和我的进度条跳到下一个命中时的最后一步。我真的很抱歉不好解释。感谢您的欢迎。 – simsalabim33

几件事情是你的代码错误：

元素ID不应该以数字字符开头。你可以在其中放入数字，但要确保第一个字符是一个alpha [a-z]。
您正在使用jQuery不包括jQuery的
您没有正确关闭您的$(document).ready(function() { ... });。代码末尾需要最后一组});。
您获得下一个进度条的逻辑对我来说似乎很不合理。我不知道你想要做什么，但我认为这将做到这一点：

替换：

$('#progressbar li').eq($("current").index(next_fs)).addClass("active");

有了这个：

$("#progressbar .active").removeClass('active').next().addClass('active');

这里更新Fiddle

来源

2014-02-27 20:27:22 Bic

非常感谢你的工作，这就是我一直在寻找的东西，但仍然有一个问题，现在进度条在当时跳了一步，并且在这一点上它会被标记为绿色，如果我能保持这个洞绿色，像;第1步完成保持绿色，第2步完成保持绿色与第1步，继续。如果有可能的话。非常感谢你。我感谢您的帮助。 ;） – simsalabim33

@ user3361351只是删除'.removeClass（'active'）' – Bic

谢谢，它工作正常，我感谢您的帮助。再次感谢你。 – simsalabim33

带进度条的多步计算器不起作用

回答

相关问题