Отображение определенного раздела / ответа на основе вопроса 1

Question

Отображение определенного раздела / ответа на основе вопроса 1

0

Я использую jquery selectbox, и я пытаюсь получить первый вопрос, чтобы определить ссылку, которая отображается в конце набора вопросов. Если пользователь выбирает первый ответ, он направляется на первую ссылку, если они выбирают ответ 2, вторую ссылку и т.д.

<div class="step question">
    <h2>Select An Answer</h2>
    <div id="q1_one" class="button button_green next">Answer 1</div>
    <div id="q1_two" class="button button_red next">Answer 2</div>
    <div id="q1_three" class="button button_red next">Answer 3</div>
</div>

И вот набор ответов, которые я пытаюсь отобразить. В настоящее время они все отображаются независимо от того, какой ответ выбран в вопросе 1, я просто пытаюсь отобразить 1 правильный ответ для каждого выбора:

<div id="if_one">
    <a href="http://websitelinkhere.com/1" class="button_primary agree">If Question 1 = Answer 1</a>
</div>
<div id="if_two">
    <a href="http://websitelinkhere.com/2" class="button_primary agree">If Question 1 = Answer 2</a>
</div>
<div id="if_three">
    <a href="http://websitelinkhere.com/3" class="button_primary agree">If Question 1 = Answer 3</a>
</div>

Вот он на JSFiddle

Joe Bobby 27 сен. 2013, в 15:43

Источник

Теги:

javascript

jquery

html

html5

jquery-selectbox

1 ответ

Ещё вопросы

Jaime Torres · Accepted Answer · 2013-09-27T12-14-00.000Z

После того, как вы копаете свой код, проблема в том, что вы не храните и не показываете свой ответ, вы просто показываете все. Вот как я его взломал. Я рекомендую вам разработать лучшую стратегию.

Полный скрипт: http://jsfiddle.net/RqvEX/

Вокруг строки 616 я добавил глобальное хранилище для ответов и записал их, когда они вошли:

document.storedAnswers = [];


$('.next, .agree').click(function () {

    next = false;
    if ($(this).hasClass('agree')) {
        button_type = 'agree';
    } else {
        button_type = 'next';
        document.storedAnswers.push(this.id);
    }
    //.... rest of code
}

И, наконец, после "проверки" я изменил ваш тайм-аут:

setTimeout(function () {

    jQuery('.verify_container .loader').hide();
    //This line showed all answers... we want to be more selective.
    //jQuery('.verify_container .button_primary').css('display', 'block');
    var answerToShow = '';
    switch(document.storedAnswers[0]) {
        case 'q1_one': {
            answerToShow = 'if_one';
            break;
        }
        case 'q1_two': {
            answerToShow = 'if_two';
            break;
        }
        default: {
            answerToShow = 'if_three';
            break;
        }           
    }

    if (answerToShow.length > 0) {
        $('#' + answerToShow + ' .button_primary').css('display', 'block');
    }

}, 1000);