Question

我正在使用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

Answer 1

在深入挖掘代码之后，问题是你没有存储/显示你的答案，你只是在显示所有内容。这是我如何破解它。我建议你想出一个更好的策略。

完整小提琴：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);

根据问题1显示一定的Div / Answer

1 个答案: