같은 위치에 나타나는 질문

Question

내 양식에 많은 질문이 있습니다.

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

이미 형태로 거의 30 질문이 - 내가 아래에있는 내 코드와 같이 내 모든 질문에 하나 하나 개의 위치가 아닌 다른 아래 하나에 표시하도록하는 방법을 찾고 있어요. 나는 첫번째 질문이 읽히고 NEXT 버튼이 클릭 될 때 두 번째 질문이 같은 위치에 나타나야한다. 첫 번째 질문은 물론 첫 번째 질문이 숨겨져있다. 물론 이것을 할 수 있는가? 또는 각 질문에 대해 별도의 페이지를 만든 다음 링크해야합니다. 희망입니다.

Answer 1

숨김 표시는 요소 만 숨기지 만 요소는 화면에서 차지한 공간을 유지합니다. display라는 CSS 스타일을 사용하고 block 및 none을 사용하여 토글해야합니다.

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

편집 :

<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은 요소를 가려서 공간을 남겨 둡니다. 아마도 .show(), .hide()을 원하십니까?

Answer 3

잘못된 여기에 일의 몇이 있습니다

1. 귀하의 마크 업 옳지 않다가. 당신이 모든 질문에 대한 이벤트를 클릭하여 작성하는 경우
2. 는

나는 다음과 같은 코드

$(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>

에게 확인 무엇을하려고 시뮬레이션하려고 질문 100의 어떤이있는 경우

희망이 있습니다.