向导 – “重新开始”按钮

我创建了我的“向导”，我按照我需要的方式工作，但我的问题是如何在结果页面上创建一个“重新开始”按钮，清除所有单选按钮并显示起始div？

目前我在2个结果div中有相同的按钮，但只有第一个工作。 救命！ （选择“问题1 – 答案1”然后选择“问题2 – 答案1或2”以获得我正在谈论的内容。）

http://jsfiddle.net/dswinson/PXp7c/56/

此外，如果您对如何实现此向导有另一个想法，请告诉我。

Answer 1

正如您可能从评论中读到的那样，您的脚本有点不对劲 。 这种编程方式在任何方面都不是动态的。它可能在某种程度上起作用，但是你可能已经经历过它的可怕维护。

对于此类应用程序，您需要创建一个处理某种数组的核心插件，其中包含问题和答案。 这似乎是一个有趣的挑战，所以我创建了一个插件，它基于您的示例参数。 它叫做DawnWizard 。

我希望，了解这个插件的一般概念，并将在您的下一个项目中应用相同的方法:)

/* * DawnWizard v1.0 * Originally made for Dawn's question in StackOverflow * http://stackoverflow.com/questions/6378814/ * * Made by Kalle H. Väravas * http://stackoverflow.com/users/721553/ * * No direct copyright or licences. * Use however you want, just give me lots of +1 :) */ (function ($) { $.fn.exists = function () {return $(this).length > 0;} $.fn.DawnWizard = function (input_setup) { var default_setup = { title: 'Demo wizard', description: 'Welcome text..' }; setup = jQuery.extend(default_setup, input_setup || {}); var wizard_container = $(this); var questions_count = 0; jQuery.each(setup['questions'], function () { questions_count++; }); load_startup = function () { results = []; wizard_container.empty().append( $('
').html(setup['wizard']['title']), content_container = $('
').append( $('
').html(setup['wizard']['description']), $('').text('Start the Wizard') ) ); $('#start_wizard').click(function () { load_question(current_qid = 1); }); }; load_results = function () { content_container.empty().append(results_container = $('
')); jQuery.each(setup['questions'], function (i, question) { results_container.append($('
').text(explain_qid(i) + ' - ' + results[i])); }); content_container.after($('').text('Start over')); current_qid = 1; $('#start_over').click(function () { load_startup(current_qid = 1); }); }; load_question = function (qid) { if (qid == 0) { load_startup(); return; } else if (qid == questions_count + 1) { load_results(); return; } content_container.empty().append( $('
').append( $('').html(setup['questions'][qid]['question']), questions = $('
') ), $('').text('Previous'), $('').text('Next') ); jQuery.each(setup['questions'][qid]['answers'], function (i, answer) { questions.append($('
 ' + answer + '
')); }); $('#previous, #next').click(function () { var action = $(this).attr('id'); var checked_answer = $('input[name=answer]:checked'); if (action == 'previous') { load_question(current_qid = current_qid - 1); } else if (action == 'next') { if (checked_answer.size() > 0) { insert_result(current_qid, checked_answer.val()); load_question(current_qid = current_qid + 1); } else { add_message('You forgot to check an answer!', 'error'); } } }); }; insert_result = function (qid, answer) { results[qid] = answer; }; explain_qid = function (qid) { return setup['questions'][qid]['question']; }; add_message = function (message, type) { if (jQuery.inArray(type, ['error', 'success'])) { return; } if (!$('#message').exists()) { content_container.before( $('
') .text(message) .fadeIn() .delay(2000) .fadeOut('normal', function () { $(this).remove(); }) ); } }; load_startup(); }; }) (jQuery);
 

^{[ 查看输出 – 评论版 ]}

如何设置问题和答案，称之为：

 $('#put_wizard_here').DawnWizard({ wizard: { title: 'Demo wizard', description: 'Welcome text..' }, questions: { 1: { question: 'Who is hotter?', answers: [ 'Miley', 'Selena', 'Mila' ] }, 2: { question: 'Who is the smartest?', answers: [ 'Kalle H. Väravas', 'Kalle\'s colleague' ] }, 3: { question: 'Coolest StackExchange?', answers: [ 'StackOverflow', 'Programmers', 'Gaming' ] } } }); 

^{[ 查看输出 – 评论版 ]}