帶進度條的多步計算器不起作用

-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

帶進度條的多步計算器不起作用

回答

相關問題