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个问题。我不希望这些问题出现在其他问题之下，而不是在阅读第一个问题并且单击“下一步”按钮时，第二个问题应出现在第一个出现的第一个问题上（当然隐藏第一个问题）可以这样做，还是我必须为每个问题创建单独的页面，然后链接它。希望我很清楚。

Answer 1

brew install boost --with-python brew install boost-python只遮盖元素，留下占据的空间。也许你想要visibility，.show()？

Answer 2

隐藏的可见性只会隐藏元素，但元素将保留它在屏幕上占用的空间。您应该使用名为display的CSS样式并使用block和none进行切换。

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

编辑：

＆＃13;

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

＆＃13;

Answer 3

这里有几个错误：

你的加分是不对的。
如果您为每个问题撰写点击事件，那么如果有100个问题

我试图模拟你想要做的事情请检查以下代码段

＆＃13;

$(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');
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

希望这有帮助

问题出现在同一位置

3 个答案: