Fragen an der gleichen Stelle

Question

Meine Form hat viele Fragen. Ich bin auf der Suche nach einer Möglichkeit, all meine Fragen in einem einzigen Standort zu haben scheinen und nicht untereinander, wie unten in meinem Code gesehen -

<p> <SPAN ID="FirstQuestion"> Blah Blah Blah </p>  

<button class="button1" button onclick="Function1()"><span>NEXT</span></button> 


<p> <SPAN ID="SecondQuestion"> Blah Blah Blah <br> </p>  

<button class="button2" button onclick="Function2()"><span>NEXT</span></button> 

<script> 

function Function1() { 

$("#SecondQuestion").css('visibility', 'visible'); 
$("#FirstQuestion").css('visibility', 'hidden'); 

</script> 

Ich habe schon fast 30 Fragen in Form. Ich möchte nicht, dass diese Fragen untereinander angezeigt werden, sondern sobald die erste Frage gelesen wurde und wenn die Taste NEXT gedrückt wird, sollte die zweite Frage an der gleichen Stelle erscheinen, an der die erste Frage auftauchte (natürlich die erste Frage verbergend) Kann dies oder ich muss für jede Frage eine eigene Seite erstellen und diese verlinken. Hoffe ich bin klar.

Answer 1

Die unsichtbare Sicht versteckt nur das Element, aber das Element behält den Platz, den es auf dem Bildschirm belegt hat. Sie sollten das CSS-Design namens display verwenden und mit block und none umschalten.

$("#SecondQuestion").css('display', 'block'); 
$("#FirstQuestion").css('display', 'none'); 

EDIT:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p class="question"> BLAH Blah Blah </p> 
 
<p class="question" style="display:none;"> Blah BLAH Blah</p> 
 

 
<button class="button1" button onclick="nextQuestion()"><span>NEXT</span></button> 
 

 

 
     
 

 
<script> 
 
var count = 0; 
 
function nextQuestion() { 
 
    var currentQuestion = $(".question")[count]; 
 
    var nextQuestion = $(".question")[++count]; 
 
    $(currentQuestion).hide(); 
 
    $(nextQuestion).show(); 
 
} 
 
</script>

Answer 2

visibility maskiert nur das Element und lässt den benötigten Platz frei. Vielleicht möchten Sie .show(), .hide()?

Answer 3

Es gibt einige Dinge falsch hier:

1. Ihre Marke nach oben ist nicht richtig.
2. Wenn Sie Ereignis für jede Frage schreiben klicken, was passiert, wenn es 100 von Fragen

Ich habe versucht zu simulieren, was Sie versuchen, den folgenden Code-Schnipsel

$(document).ready(function(){ 
 
    var count=1; 
 
    $('.question:not(:first-child)').addClass('hide'); 
 
    $('.question .next').bind('click',function(){ 
 
    // alert(count); 
 
     var $prevQuestion=$('.question:nth-child('+count+')'); 
 
     $prevQuestion.removeClass('show').addClass('hide'); 
 
     count=count+1; 
 
     //alert(count); 
 
     var $currQuestion=$('.question:nth-child('+count+')'); 
 
     $currQuestion.removeClass('hide').addClass('show'); 
 
    }); 
 
});

.hide{ 
 
    display:none; 
 
    
 
} 
 
.show{ 
 
    display:block; 
 
    background:red; 
 
}

<div class="question"> 
 
    <p>question1</p> 
 
    <input type="button" class="next" value="next"/> 
 
</div> 
 

 
<div class="question"> 
 
    <p>question2</p> 
 
    <input type="button" class="next" value="next"/> 
 
</div> 
 

 
<div class="question"> 
 
    <p>question3</p> 
 
    <input type="button" class="next" value="next"/> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

zu tun überprüfen

Hoffe, das hilft