[英]Display HTML tags with button clicks, one at a time
I have a series of <p>
tags and a button. 我有一系列的
<p>
标记和一个按钮。 I firstly want to hide all <p>
tags and then on each subsequent button click, I want to display one of the <p>
tags. 我首先要隐藏所有
<p>
标记,然后在每个后续按钮单击时,我要显示<p>
标记之一。
Right now I am using one button per <p>
tag, keeping all other buttons hidden, but I want to know whether this can be done using only one button. 现在,我每个
<p>
标签都使用一个按钮,而所有其他按钮都保持隐藏状态,但是我想知道是否可以仅使用一个按钮来完成。
HTML 的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>
In JavaScript, I would display <p>
and then display next button and hide this button 在JavaScript中,我将显示
<p>
,然后显示下一个按钮并隐藏此按钮
$(document).ready(function(){
$("#button1").click(function(){
$("#p1").show();
console.log("button clicked");
$("#button1").hide();
$("#button2").show();
});
});
Is there a better approach to do this? 有没有更好的方法可以做到这一点? Maybe using just one button?
也许只用一个按钮?
You can use a single button for this to show p
elements one after another on each button click like: 您可以使用单个按钮来显示
p
元素,每次单击按钮时都依次显示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>
Since you're already using jquery.... 由于您已经在使用jQuery...。
You can use :hidden:first
to select the first hidden item and show it. 您可以使用
:hidden:first
选择第一个隐藏项目并显示它。
As an added bonus, you can then check if there is not more to show and hide the button 另外,您还可以检查是否没有其他需要显示和隐藏的按钮
//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>
Now lets get fancy and change the button to hide the paragraphs when we get all visible 现在让我们看中并更改按钮以在所有可见时隐藏段落
//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>
you can use core JavaScript Concept. 您可以使用核心JavaScript概念。 For showing
为了展示
document.getElementById('YourID').style.display="block"
For invisible 对于隐形
document.getElementById('YourID').style.display="none"
Here is the solution : https://codepen.io/creativedev/pen/oyEqdd 这是解决方案: 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();
});
});
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>
I think this is what you are after, essentially the code below first hides all the p tags, then collects all the p tags in an array and then using recursion shows each one with each subsequent click on the button. 我想这就是您要执行的操作,本质上,下面的代码首先隐藏了所有p标签,然后将所有p标签收集到一个数组中,然后使用递归显示每个按钮,并在每次单击按钮时都显示。 It then alerts you to when all tags are displayed.
然后,它会在显示所有标签时提醒您。
$(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>
Put all paragaraph element under a div to specify scope and they can be handle by one button more easily. 将所有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>
Try this... 尝试这个...
$(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>
See the approach below. 请参阅下面的方法。 Let me know if it is what you're after:
让我知道您是否在追求:
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.