单击按钮一次显示HTML标记

时间：2018-06-20 06:26:57

标签： javascript html

我有一系列<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();
            });
        });

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

9 个答案:

答案 0 :(得分：2)

为此，您可以使用单个按钮来显示public function index() { $data=$this->model->viewBlog(); $this->load->view('blog/index',['data'=>$data]); } 元素，每次单击按钮时都依次显示以下元素：

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;
}

答案 1 :(得分：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>

答案 2 :(得分：1)

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

System.Random

对于隐形

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

答案 3 :(得分：1)

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

    it('should tell ROUTER to navigate when hero clicked', () => {

  heroClick(); // trigger click on first inner <div class="hero">

  // args passed to router.navigateByUrl() spy
  const spy = router.navigateByUrl as jasmine.Spy;
  const navArgs = spy.calls.first().args[0];

  // expecting to navigate to id of the component's first hero
  const id = comp.heroes[0].id;
  expect(navArgs).toBe('/heroes/' + id,
    'should nav to HeroDetail for first hero');
});

答案 4 :(得分：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>

答案 5 :(得分：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>

答案 6 :(得分：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>

答案 7 :(得分：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>

答案 8 :(得分：-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>

相关问题
最新问题