Question

我目前正在尝试使用jquery添加基于问题答案的系统。我想一次显示3个问题，然后点击下一个按钮，另外3个问题就来了。

这是HTML

 <?php
    if (!isset($_POST['phone']) = 0) {
        echo '
       <p>Call me at ' . $_POST['phone'] . '.</p>               
        ';
    }else{
       <p>No Number</p> 
    }
 ?>

我尝试过像这样使用Jquery。

<div class="questions">

    <div class="question"> <div class="button-start">Start</div></div>
    <div class="question hide"> Q No 1</div>
    <div class="question hide"> Q No 2</div>

    <div class="question hide"> Q No 3
         <a class="button-next">Next</a>
    </div>

    <div class="question hide"> Q No 4</div>
    <div class="question hide"> Q No 5</div>

    <div class="question hide"> Q No 6
        <a class="button-previous">Previous</a><a class="button-next">Next</a>
    </div>

    <div class="question hide"> Q No 7</div>
    <div class="question hide"> Q No 8</div>
    <div class="question hide"> Q No 9
        <a class="button-previous">Previous</a><a class="button-next">Next</a>
    </div>

    <div class="question hide"> Q No 10</div>
    <div class="question hide"> Q No 11</div>
    <div class="question hide"> Q No 12
        <a class="button-previous">Previous</a>
    </div>
    <div class="question hide"> Q No 13</div>
    <div class="question hide "> Q No 14</div>
    .........
    ......
    ...
</div>

但问题是“开始”按钮正在运行，但我无法获得下一个和上一个按钮的工作。我尝试使用lt gt not working：（

Answer 1

尝试FIDDLE。

我已更新javascript代码，如下所示

$(function () {

    $('.button-start').click(function (e) {
        $('.question:lt(4)').fadeIn(500);
        $(this).fadeOut(500);
        e.preventDefault();
    });

    $('.button-next').click(function () {
        var index = $(this).closest('.question').index();
        $('.question:lt('+(index + 4)+'):gt('+index+')').fadeIn(500);
        $('.question:lt('+(index + 1)+'):gt('+(index - 3)+')').fadeOut(500);
    });

    $('.button-previous').click(function () {
        var index = $(this).closest('.question').index();
        $('.question:lt('+(index - 2)+'):gt('+(index - 6)+')').fadeIn(500);
        $('.question:lt('+(index + 1 )+'):gt('+(index - 3)+')').fadeOut(500);
    });

});

根据您的HTML，我已经替换了以下选择器

$('.btnStart')至$('.button-start')
$('.btnNext')至$('.button-next')

还添加了之前的按钮功能。

希望这有助于............

在Jquery中单击每个按钮后加载3个元素

1 个答案: