Question

我有以下代码取消隐藏某些＆lt; P>单击按钮时的元素，但是我想按照它们在页面上显示的顺序一次取消隐藏它们，每次单击按钮而不是同时按下所有按钮时，任何人都有任何想法？

CSS：

p 
{ 
    display: none; 
}

JS：

$(document).ready(function()
{
    $("#show").click(function()
    {
        $("p").show();
    });
});

HTML：

<P>Line 1</P>
<P>Line 2</P>
<P>Line 3</P>
<button type="button" id="show">Next</button>

所有三个在一起：

<HTML>
<HEAD>
<TITLE>Test 1</TITLE>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>p { display: none; }</style>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("p").show();
});
});
</script>
</HEAD>
<BODY>
<P>Line 1</P>
<P>Line 2</P>
<P>Line 3</P>
<button type="button" id="show">Next</button> 
</BODY>
</HTML>

Answer 1

您可以将:hidden jQuery pseudo-selector与first结合使用（它只按文档顺序提供集合中的第一个元素），因此在click处理程序中：

$("p:hidden").first().show();

Live Copy

Answer 2

你可以试试这个：

$(document).ready(function(){
  var i = 0;
  $("#show").click(function(){
    $("p:eq("+i+")").show();
    i++;
  });
});

Answer 3

尝试为段落添加一些容器，并检查段落的显示属性

    <HEAD>
    <TITLE>Test 1</TITLE>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <style>p { display: none; }</style>
    <script>
    $(document).ready(function(){
      $("#show").click(function(){    
      findParagraph();
      });
    });

    var pars = $('.container').find('p');
    function findParagraph(){    
      $.each(pars,function(index,val){
       if( $(val).css('display') == 'none'){
          $(val).show();
          return false;
       }    
      });
    });
    </script>
    </HEAD>
    <BODY>
    <div class="container">
    <P>Line 1</P>
    <P>Line 2</P>
    <P>Line 3</P>

    </div>
    <button type="button" id="show">Next</button> 
    </BODY>
    </HTML>`

在Jquery中逐一显示行？

3 个答案: