根据多项选择返回相应的答案

Question

编辑代码只显示1个问题。

当我点击答案时。返回的div应该与点击的答案相匹配。 因此1将返回answer1,2回答2 ..此时他们都返回答案1.

 function clear_delay(timeoutID_here) {
    window.clearTimeout(timeoutID_here);
}
/* Run 1 */
function run_loading_run_1(time_delay) {
    timeoutID1 = window.setTimeout(run_loading_1, time_delay);
}

function run_loading_1() {
    $('.thank_for_close, .run_loading_2').fadeIn();
    $('.main_review').hide();
}
/* Run 2 */
function run_loading_run_2(time_delay) {
    timeoutID2 = window.setTimeout(run_loading_2, time_delay);
}

function run_loading_2() {
    $('.thank_for_close, .run_loading_2').hide();
    $('.run_loading_3, .li_run_loading_1, .li_run_loading_2').fadeIn();
}
/* Run 3 */
function run_loading_run_3(time_delay) {
    timeoutID3 = window.setTimeout(run_loading_3, time_delay);
}

function run_loading_3() {
    $('.run_loading_3').hide();
    $('.run_loading_4, .li_run_loading_3').fadeIn();
}
/* Run 4 */
function run_loading_run_4(time_delay) {
    timeoutID3 = window.setTimeout(run_loading_4, time_delay);
}

function run_loading_4() {
    $('.run_loading_4, .loading').hide();
    $('.li_run_loading_4, li_run_loading_5, .run_loading_5, .show_end').fadeIn();
}
$(".step3 a").click(function () {
    $('.content').hide();
});
$(function () {
    $('.next').click(function (e) {
        e.preventDefault();
        $(this).parent().hide().next().fadeIn();
    });
    $('.a').click(function (e) {
        e.preventDefault();
        $(this).parent().hide().next().fadeIn();
        $('.run_loading').hide();
        $('.step4a .loading').show();
        run_loading_run_1('700');
        run_loading_run_2('1500');
        run_loading_run_3('2200');
        run_loading_run_4('3500');

    });
    $('.b').click(function (e) {
        e.preventDefault();
        $(this).parent().hide().next().fadeIn();
        $('.run_loading').hide();
        $('.step4b .loading').show();
        run_loading_run_1('700');
        run_loading_run_2('1500');
        run_loading_run_3('2200');
        run_loading_run_4('3500');

    });
    $('.c').click(function (e) {
        e.preventDefault();
        $(this).parent().hide().next().fadeIn();
        $('.run_loading').hide();
        $('.step4c .loading').show();
        run_loading_run_1('700');
        run_loading_run_2('1500');
        run_loading_run_3('2200');
        run_loading_run_4('3500');

    });
});

我的HTML是

<div id="wrapper">
     <div class="step3 marker_show">
         <h2>Question 3: <span>these are different</span></h2>
<a href="#" class="step_button step_button_1 run_loading a">1</a>

        <br /> <a href="#" class="step_button step_button_2 run_loading b">2</a>

        <br /> <a href="#" class="step_button step_button_3 run_loading c">3</a>

        <br />
    </div>
    <!-- STEP 3 END -->
    <div class="step4a marker_show" style="display:none;">
         <h3 class="run_loading_1 main_review">Reviewing your answers</h3>

         <h3 class="run_loading_2" style="display:none;">question1.. check</h3>

         <h3 class="run_loading_3" style="display:none;">Artice Count.. check</h3>

         <h3 class="run_loading_4" style="display:none;">Your Selected Tags.. check</h3>

         <h3 class="run_loading_5" style="display:none;">Congratulations!</h3>

        <center>
            <img src="images/loading.gif" alt="" class="loading" style="display:none;">
        </center>
        <ul class="done_marker">
            <li class="thank_for_close" style="display:none;">Access Allowed</li>
            <li class="li_run_loading_1" style="display:none;">Logging in</li>
            <li class="li_run_loading_2" style="display:none;">Answer to question3 is 1</li>
            <li class="li_run_loading_3" style="display:none;">Please Wait...</li>
            <li class="li_run_loading_4" style="display:none;">Get Access Below!</li>
        </ul>
        <div class="show_end" style="display:none;">
             <h4>Searching For Best Deal</h4>
 <a id="agree" href="link1" class="step_button step_button_1 agree">CLICK HERE NOW »</a> 
        </div>
    </div>
    <!-- STEP 4A END -->
    <div class="step4b marker_show" style="display:none;">
         <h3 class="run_loading_1 main_review">Reviewing your answers</h3>

         <h3 class="run_loading_2" style="display:none;">question1.. check</h3>

         <h3 class="run_loading_3" style="display:none;">Artice Count.. check</h3>

         <h3 class="run_loading_4" style="display:none;">Your Selected Tags.. check</h3>

         <h3 class="run_loading_5" style="display:none;">Congratulations!</h3>

        <center>
            <img src="images/loading.gif" alt="" class="loading" style="display:none;">
        </center>
        <ul class="done_marker">
            <li class="thank_for_close" style="display:none;">Access Allowed</li>
            <li class="li_run_loading_1" style="display:none;">Logging in</li>
            <li class="li_run_loading_2" style="display:none;">Answer to question3 is 2</li>
            <li class="li_run_loading_3" style="display:none;">Please Wait...</li>
            <li class="li_run_loading_4" style="display:none;">Get Access Below!</li>
        </ul>
        <div class="show_end" style="display:none;">
             <h4>Searching For Best Deal</h4>
 <a id="agree" href="link2" class="step_button step_button_1 agree">CLICK HERE NOW »</a> 
        </div>
    </div>
    <!-- STEP 4B END -->
    <div class="step4c marker_show" style="display:none;">
         <h3 class="run_loading_1 main_review">Reviewing your answers</h3>

         <h3 class="run_loading_2" style="display:none;">question1.. check</h3>

         <h3 class="run_loading_3" style="display:none;">Artice Count.. check</h3>

         <h3 class="run_loading_4" style="display:none;">Your Selected Tags.. check</h3>

         <h3 class="run_loading_5" style="display:none;">Congratulations!</h3>

        <center>
            <img src="images/loading.gif" alt="" class="loading" style="display:none;">
        </center>
        <ul class="done_marker">
            <li class="thank_for_close" style="display:none;">Access Allowed</li>
            <li class="li_run_loading_1" style="display:none;">Logging in</li>
            <li class="li_run_loading_2" style="display:none;">Answer to question3 is 3</li>
            <li class="li_run_loading_3" style="display:none;">Please Wait...</li>
            <li class="li_run_loading_4" style="display:none;">Get Access Below!</li>
        </ul>
        <div class="show_end" style="display:none;">
             <h4>Searching For Best Deal</h4>
 <a id="agree" href="link3" class="step_button step_button_1 agree">CLICK HERE NOW »</a> 
        </div>
    </div>
    <!-- STEP 4C END -->
</div>

我已经把它放在http://jsfiddle.net/GWq4V/2/

Answer 1

我已经解决了一个更简单的问题，也许它可以帮助你做任何你想要做的事情。

http://jsfiddle.net/bUJPL/

JS：

var answers = ['first answer', 'second answer', 'third answer'];

$(document).on('click', 'button', function(){
    var answerIndex = $(this).attr('data-answerindex'),
        answer = answers[Number(answerIndex, 10)];

    $($(this)).after('<span class="answer">'+answer+'</span>');
    $(this).hide();

});

HTML：

<button data-answerindex="0">Button 1</button>
<button data-answerindex="1">Button 2</button>
<button data-answerindex="2">Button 3</button>