1

我有一系列<p>标签和一个按钮。我首先想隐藏所有<p>标签，然后在每个后续按钮单击时，我想显示其中一个<p>标签。

现在我每个<p>标签使用一个按钮，隐藏所有其他按钮，但我想知道这是否可以只使用一个按钮来完成。

HTML

<p hidden id="p1">One</p>
<button id="button1">Show me more</button>
<p hidden id="p2">Two</p>
<button id="button1" style="display: none;">Show me more</button>
<p hidden id="p3">Three</p>
<button id="button1" style="display: none;">Show me more</button>

在 JavaScript 中，我会显示<p>然后显示下一个按钮并隐藏此按钮

$(document).ready(function(){
        $("#button1").click(function(){
        $("#p1").show();
        console.log("button clicked");
        $("#button1").hide();
        $("#button2").show();
            });
        });

有没有更好的方法来做到这一点？也许只使用一个按钮？

4

9 回答 9

2

由于您已经在使用 jquery....

您可以使用:hidden:first选择第一个隐藏的项目并显示它。

作为额外的奖励，您可以检查是否没有更多显示和隐藏按钮

//Do something on out button click
$("#showMore").click(function(){
  //We've used the showMeMore class
  //to hide and identify out paragraphs
  
  //Show the first hidden paragraph
  $(".showMeMore:hidden:first").show();
  
  //Hide the button if there are no more visible.
  if($(".showMeMore:hidden").length === 0) {
    $(this).hide();
  }
});
/*Use some CSS to hide our elements*/
.showMeMore{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="showMeMore">I'm parra one</p>
<p class="showMeMore">I'm parra two</p>
<p class="showMeMore">I'm parra three</p>
<button id="showMore">Show Me More</button>

现在让我们花哨并更改按钮以在我们全部可见时隐藏段落

//Do something on out button click
$("#showMore").click(function() {
  //We've used the showMeMore class
  //to hide and identify out paragraphs 

  if ($(this).data("mode") === "show") {

    //Show the first hidden paragraph
    $(".showMeMore:hidden:first").show();

    //Change the button if there are no more hidden.
    if ($(".showMeMore:hidden").length === 0) {
      //Change the mode attribut and set some text
      $(this).data("mode", "hide").text("Show Me Less");
    }
  } else {
    //Hide the last visible paragraph
    //console.log($(".showMeMore:visible:last"));
    $(".showMeMore:visible:last").hide();

    //Change the button if there are no more visible.
    if ($(".showMeMore:visible").length === 0) {
      //Change the mode attribut and set some text
      $(this).data("mode", "show").text("Show Me More");
    }
  }
});
/*Use some CSS to hide our elements*/

.showMeMore {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="showMeMore">I'm parra one</p>
<p class="showMeMore">I'm parra two</p>
<p class="showMeMore">I'm parra three</p>
<!-- Note the addition of a data attribute -->
<button id="showMore" data-mode="show">Show Me More</button>

于 2018-06-20T06:44:20.980 回答
2

您可以为此使用单个按钮p在每个按钮单击时一个接一个地显示元素，例如：

$('#button1').click(function(){
  var $p = $('p');
  for(var i=0; i<$p.length; i++){
    if($($p[i]).css('display') === 'none'){
      $($p[i]).css('display', 'block');
      break;
    }
  }
});
p {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p1">One</p>
<p id="p2">Two</p>
<p id="p3">Three</p>
<p id="p4">Four</p>
<button id="button1">Show me more</button>

于 2018-06-20T06:36:52.427 回答
1

这是解决方案：https ://codepen.io/creativedev/pen/oyEqdd

$(document).ready(function(){
  $('p').hide();
  $("button").on('click',function(){
    var clicked = $(this).attr('id').match(/\d+/);
    $("#p"+clicked[0]).show();
    var nextbtn = parseInt(clicked[0])+1;
    $("#button"+nextbtn).show();
  });

});
于 2018-06-20T06:39:03.943 回答
1 
var index = 1;

$(function() {
  $("#button1").click(function(){
    $("#p" + index).show();
    index++;
  });
});


<p hidden id="p1">One</p>
<p hidden id="p2">Two</p>
<p hidden id="p3">Three</p>
<button id="button1">Show me more</button>
于 2018-06-20T06:42:52.443 回答
1

尝试这个...

$(document).ready(function(){
	  $('p').hide();
	  var $p = $('p');
	  var count = 0;
	  $("button").on('click',function(){
		  count ++;
		  for(var i=1; i<=$p.length; i++){
			  if(i == count){
				  $("#p"+i).show(); 
			  }
		  }
	  });
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1" >Show me more</button>
<p id="p1">One</p>
<p id="p2">Two</p>
<p id="p3">Three</p>
<p id="p4">Four</p>
<p id="p5">Five</p>

于 2018-06-20T09:11:02.003 回答
1

我认为这就是您所追求的，基本上下面的代码首先隐藏所有 p 标签，然后将所有 p 标签收集在一个数组中，然后使用递归显示每个后续单击按钮的标签。然后它会在显示所有标签时提醒您。

$(document).ready(function() {

  let pTags = document.querySelectorAll('p')

  pTags.forEach((tag) => {
    tag.style.display = 'none'
  })

  let num = pTags.length - 1;
  let i = 0

  let show = function() {
    if (i <= num) {
      pTags[i].style.display = 'block'
      i++
    } else {
      alert('All <p> tags are visible')
    }
  }
  $('#button1').on('click', function() {
    event.preventDefault()
    show()
  })
});
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  <script src="test.js"></script>
</head>

<body>
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
  <button id="button1">Show me more</button>
</body>

</html>

于 2018-06-20T06:52:12.843 回答
1

您可以使用核心 JavaScript 概念。用于展示

document.getElementById('YourID').style.display="block"

对于隐形

document.getElementById('YourID').style.display="none"
于 2018-06-20T06:35:56.783 回答
1

将所有paragaraph元素放在一个div下指定范围，一键处理更方便。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").hide()
var ind=0
    $("#btn").on("click",function(){	
        var obj=$("#block").children("p")[ind];
        $(obj).show();
        ind++
    });
});
</script>
</head>
<body>
<div id="block">
<p>I m first</p>
<p>second</p>
<p>third</p>
<input id="btn" type="button" value="clickme"/>
</div>
</body>
</html>

于 2018-06-20T07:22:17.983 回答
-1

请参阅下面的方法。让我知道它是否是您所追求的：

$(document).ready(function() {
  $('.show-more').click(function() {
    var toShow = $(this).attr('data-to-show');

    if (!toShow)
      return;

    $('#' + toShow).show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="p1">
  <p>One</p>
  <button class="show-more" data-to-show="p2">Show me more</button>
</div>
<div id="p2" style="display: none;">
  <p>Two</p>
  <button class="show-more" data-to-show="p3">Show me more</button>
</div>
<div id="p3" style="display: none;">
  <p>Three</p>
  <button class="show-more" data-to-show="p4">Show me more</button>
</div>

于 2018-06-20T06:33:51.777 回答