Question

我正在尝试制作一个问题页面，一旦点击一个选项。当前的问题逐渐淡出被新问题替换为＆amp;一套答案。

我几乎得到了我想要的东西，除了我想要一个更有效的方式来改变问题，而不是为每一个问题写出函数。也许某些东西使用。这个？只是有点卡住= \

干杯！

HTML

<div class="content" id="question1">
<div class="question-wrap">
    <h2>This is a Question1</h2>
</div>
<div class="choice-wrap">
<table class="choice-table">
    <tr>
    <td class="choice">choice1</td>
    <td class="choice">choice2</td>
    <td class="choice">choice3</td>
    <td class="choice">choice4</td>
    </tr>
</table>
</div>
</div>
<div class="content" id="question2">
<div class="question-wrap">
    <h2>This is a Question2</h2>
</div>
<div class="choice-wrap">
    <table class="choice-table">
        <tr>
            <td class="choice">choice1</td>
            <td class="choice">choice2</td>
            <td class="choice">choice3</td>
            <td class="choice">choice4</td>
        </tr>
    </table>
</div>
</div>
<div class="content" id="question3">
<div class="question-wrap">
    <h2>This is a Question3</h2>
</div>
<div class="choice-wrap">
    <table class="choice-table">
        <tr>
            <td class="choice">choice1</td>
            <td class="choice">choice2</td>
            <td class="choice">choice3</td>
            <td class="choice">choice4</td>
        </tr>
    </table>
</div>
</div>

CSS

.content    {
width: 1024px;
margin: auto;
text-align: center;
padding: 25px;
}

.choice-wrap    {
margin-top: 50px;
}

.choice-table   {
margin: auto;
}

.choice    {
background: #666;
padding: 25px;
cursor: pointer;
border-radius: 999px
}

#question2  {
display: none;
}

#question3  {
    display: none;
}

的jQuery

$(document).ready(function(){
  $('.choice').click(function (){
$('#question1').fadeOut(1000, function(){
  $('#question2').fadeIn(1000);
  });
});

谢谢！

Answer 1

你错过了结束括号

$(document).ready(function(){
    var count = 0,
    iQuestionsLen = $('.content').length; //Total quesitons length

    $('.choice').click(function (){
    $('.content').eq(count).fadeOut(1000, function(){
    count += 1;

    if (iQuestionsLen == count) {
        count = 0;
        //OP logic at last question
    }        
    $('.content').eq(count).fadeIn(1000);
  });

});
});

点击此链接http://jsfiddle.net/aeaUJ/6/

Answer 2

您应该查看jQuery提供的next（）函数。你的问题是兄弟节点，因此调用next（）函数会得到下一个问题。

像这样：http://jsfiddle.net/aeaUJ/11/

$(document).ready(function () {
    $('div.content').on('click', '.choice', function () {
        var $this = $(this), // your choice
            question = $this.closest('div.content');
        console.log( $this.text() + ' was chosen for ' + question.attr('id') );
        question.fadeOut(function(){
            question.next().fadeIn();
        });
    });
});

Answer 3

如果您不只有3个问题， this fiddle 会针对任意数量的问题（例如5个问题）执行您想要的操作。

jquery ：

$(document).ready(function(){
    $('div.content:first-child').fadeIn();
    $('.choice').click(function (){
        var $thisParent = $(this).closest('div.content');
        $thisParent.fadeOut(1000, function(){
            $thisParent.next('.content').fadeIn();
        });
    });
});

请注意，CSS也会更改。

编辑：要在最后一个问题后显示内容，您可以使用 this updated fiddle

Answer 4

只需修改，使用parents（）。find

$(document).ready(function(){
   var count = 0;
   $('.choice').click(function (){
       $(this).parents().find('.content').eq(count).fadeOut(1000, function(){      
       count++;
       $(this).parents().find('.content').eq(count).fadeIn(1000);
      });
   });
});

Jquery fadeout＆amp;替换div

4 个答案: