Мастер для отображения результатов ДИВС на основе ответов


Я создал "мастера", используя Javascript и на основе ответов людей вы взяты к определенным результатам ДИВС. Он работает так, как я хочу, но этот код очень однообразная. Есть ли способ, чтобы очистить этот код JavaScript?

Демо можно увидеть здесь.

$(".hidden").hide();

$(function() {

$("#start_button").click(function(){
            $("#wizard_start").hide();
            $("#Q1").show();
});

$("#reset").click(function(){
        $("#wizard_start").show();
        $(".hidden").hide();
        $(":input").not(":button, :submit, :reset, :hidden").each( function() {
        this.value = this.defaultValue;     
});

});

$("#q1_button").click(function(){
        if ($("input[value='q1_1']:checked").val()){
            $("#Q2").show();
            $("#Q1").hide();
        }
        else if ($("input[value='q1_2']:checked").val()) {
            $("#results1").show();
            $("#Q1").hide();
        }
        else if ($("input[value='q1_3']:checked").val()) {
            $("#Q3").show();
            $("#Q1").hide();
        }
});

$("#q2_button").click(function(){
        if ($("input[value='q2_1']:checked").val()){
            $("#results2").show();
            $("#Q2").hide();
        }
        else {
            $("#results3").show();
            $("#Q2").hide();
        }


});

    $("#q3_button").click(function(){
        if ($("input[value='q3_1']:checked").val()){
            $("#Q4").show();
            $("#Q3").hide();
        }
        else {
            $("#results1").show();
            $("#Q3").hide();
        }

});

$("#q4_button").click(function(){
        if ($("input[value='q4_1']:checked").val()){
            $("#Q5").show();
            $("#Q4").hide();
        }
        else {
            $("#Q6").show();
            $("#Q4").hide();
        }

});

$("#q5_button").click(function(){
        if ($("input[value='q5_1']:checked").val()){
            $("#results4").show();
            $("#Q5").hide();
        }
        else {
            $("#Q7").show();
            $("#Q5").hide();
        }

});

$("#q6_button").click(function(){
        if ($("input[value='q6_1']:checked").val()){
            $("#Q8").show();
            $("#Q6").hide();
        }
        else {
            $("#Q9").show();
            $("#Q6").hide();
        }

});

$("#q7_button").click(function(){
        if ($("input[value='q7_1']:checked").val()){
            $("#results4").show();
            $("#Q7").hide();
        }
        else {
            $("#results5").show();
            $("#Q7").hide();
        }

});

$("#q8_button").click(function(){
        if ($("input[value='q8_1']:checked").val()){
            $("#results6").show();
            $("#Q8").hide();
        }
        else {
            $("#results7").show();
            $("#Q8").hide();
        }

});

$("#q9_button").click(function(){
        if ($("input[value='q9_1']:checked").val()){
            $("#results8").show();
            $("#Q9").hide();
        }
        else if ($("input[value='q9_2']:checked").val()) {
            $("#Q10").show();
            $("#Q9").hide();
        }

        else if ($("input[value='q9_3']:checked").val()) {
            $("#results3").show();
            $("#Q9").hide();
        }

});

$("#q10_button").click(function(){
        if ($("input[value='q10_1']:checked").val()){
            $("#results9").show();
            $("#Q10").hide();
        }
        else {
            $("#results3").show();
            $("#Q10").hide();
        }

});

$("#q2_backbutton").click(function(){
    $("#Q1").show();
    $("#Q2").hide();
});
$("#q3_backbutton").click(function(){
    $("#Q1").show();
    $("#Q3").hide();
});
$("#q4_backbutton").click(function(){
    $("#Q3").show();
    $("#Q4").hide();
});
$("#q5_backbutton").click(function(){
    $("#Q4").show();
    $("#Q5").hide();
});
$("#q6_backbutton").click(function(){
    $("#Q4").show();
    $("#Q6").hide();
});
$("#q7_backbutton").click(function(){
    $("#Q5").show();
    $("#Q7").hide();
});
$("#q8_backbutton").click(function(){
    $("#Q6").show();
    $("#Q8").hide();
});
$("#q9_backbutton").click(function(){
    $("#Q6").show();
    $("#Q9").hide();
});
$("#q10_backbutton").click(function(){
    $("#Q9").show();
    $("#Q10").hide();
});

});


465
4
задан 22 июня 2011 в 05:06 Источник Поделиться
Комментарии
2 ответа

Что-то вроде это, вероятно, хороший способ начать укрепление. Сделать кнопки поделиться класс случайно?

$('.myButtonClass').click(function () {
// Extract an id:
var myid = this.id.substr(1, 3);

switch (myid) {
case 'reset':
$('wizard_start').show();
$('questionClass').hide();

default:
if ($("input[value='q' + myid + '_1']:checked").val()){
$("#Q" + (myid + 1)).show();
} else {
$("#Q" + (myid + 2)).show();
}

$("#Q" + myid).hide();
}

});

Количество дублирования кода это будет зависеть от того, насколько похожи ваши тела функция на самом деле. Вам бы добавить случае заявления к коммутатору с учетом особых случаях.

Кроме того, можно добавить объект, который содержал значения, ссылаясь на то, что вы сверьте, что вы показываете, и что вы скрываете. Это будет выглядеть примерно так:

var wizardOrder = {
'q1': {
'check': "input[value='q1_1']:checked",
'show': 'Q2',
'hide': 'Q3'
}
};

Наша функция будет что-то вроде этого:

$('myButtonClass').click(function () {
var myid = this.id.substr(1, 3);

if ($(wizardOrder[myid]['check']).val()) {
$(wizardOrder[myid]['show'].show();
$(wizardOrder[myid]['hide'].show();
}
});

Надеюсь, один из этих двух вяжется с вашей идеей сокращения дублирования и/или упрощение.

-- Редактирование --

Я понял, что я не обратился свои "перейти к началу" функциональность. Я добавил, что в первом примере. Это может быть добавлено ко второму, а также.

5
ответ дан 22 июня 2011 в 07:06 Источник Поделиться

Я вернусь и редактировать этот больше предложений, но сейчас у меня есть две незначительные показатели для вашего, чтобы забрать:


  • Кэш jQuery с DOM-элементами! Не продолжать использовать $('#К2') и т. д. Храните его так, как в начале вашего закрытия: ВАР $В2 = $('#В2');.

  • Также не используйте :проверено").функция val(). Это только кажется, назад. Использовать $("введите[значение=все]").это(":проверено");

  • Кроме того, чтобы уменьшить количество кода, который вы продублировали, вы можете записать только одну функцию для обработки отображения и скрытия вопросов.

Пример:

var questions = [$('#Q1'), $('#Q2') ... etc];
function showQuestion(questionNumber) {
questionNumber -= 1; // so you can pass in '1' and have it zero indexed.
for (var i = 0; i < questions.length; i++) {
if (i === questionNumber) questions[i].show();
else questions[i].hide();
}
}


  • Вы находитесь на правильном пути здесь просят способов сократить дублирование кода. Вы принимаете очень процедурные и "ручной" подход к написанию кода, хотя, с самого начала попытаться представить себе, стандартные повторяющиеся задачи, вы будете пытаться в вашу программу и Реферат их функции / методы. Стоит также пытается занять более ОО подход к кодированию.

  • Это немного собственной вилку, но я недавно писал в рамки, которые могут помочь с этим....
    http://github.com/skippychalmers/xa.js/ . Вы могли бы переписать это приложение викторины и обслуживать его довольно легко. Никаких проблем вообще с ним, просто дайте мне знать и я исправлю / поддержки. Кроме того, это может быть хорошей идеей, чтобы использовать что-то немного более зрелым, как в SproutCore, нокаут, позвоночника или позвоночника. Проверьте их все и исследовать ваши варианты. Это кривая обучения, чтобы сделать прыжок из этой процедурный стиль программирования с более устойчивой ОО подход, но оно того стоит в долгосрочной перспективе!

2
ответ дан 13 августа 2011 в 08:08 Источник Поделиться