Question

我有一个这样的列表结构：

  <ul id="part">   
    <?php 
      $i=0; 
      foreach ($q as  &$value):
        $i++;
        $quid = $value->q_id;
        $ans= $this->mem->get_ans($quid);
        echo '<li id="div'.$i.'" class="ques" style="display: none;">';
        echo '  <h2>'.$i.' . '.$value->question.'</h2>';              
                foreach($ans as $answer):
                  echo '<label>';
                  echo '<input type="checkbox" value="'.$answer->ans_id.'" />';
                  echo $answer->ans_name;
                  echo '</label>';
                endforeach;
        echo '</li>';
      endforeach; ?>
      <button id="next">Next</button>
    </ul>

我想要以下内容：当有人点击按钮#next时，它会显示下一个列表项并进一步显示。我怎样才能用jQuery实现这个目标？

Answer 1

将您的<button>标记移至<ul>之外仅<li>（列表项）在无序列表中有效。

JavaScript（使用jQuery）需要做你要问的事情如下：

$(function() {

    //cache the items for quicker access       
    var items = $('ul#part li');

    //bind your event to #next
    $('#next').click(function() {

       //Check if no elements are visible yet.
       if(items.filter(':visible').length == 0) {
         items.first().show();
       }
       else {
         //Otherwise, select the last visible one, 
         //then transverse to the next one and show it
         items.filter(':visible:last').next().show();
       }

    });

});

Answer 2

我使用此方法逐个显示列表项

     $(function(){             

  var i=2;
    $("#div1").show("slow");
     $('#next').click(function(){
         $('#div' + i).show('slow');
         var j=i-1;
         $('#div'+ j).hide('slow');
        i++;

     });


  });

         });

如何使用jquery在click（）。next（）之后逐个显示div

2 个答案: