0

我正在使用 jquery 选择框，我正在尝试获取第一个问题以确定在问题集末尾显示的链接。如果用户选择第一个答案，他们将被定向到第一个链接，如果他们选择答案 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

4

1 回答 1

0

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

完整的小提琴：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);
于 2013-09-27T14:45:42.403 回答