JavaScript - 如何显示下一个div并隐藏前一个div？

时间：2015-02-16 05:47:23

标签： javascript html

我正在创建一个简单的测验，想知道如何一次显示一个问题但只使用JavaScript。我不知道jQuery。基本上，我希望自动显示第一个问题。

以下是我的HTML的示例：

<div id="q0">
   <li>
      <h3>1. The color of the sky is... </h3>
      <input type="radio" name="question0" value="A">Green<br>
      <input type="radio" name="question0" value="B">Blue<br>
      <input type="radio" name="question0" value="C">Red<br>
      <input type="radio" name="question0" value="D">Purple<br>
   </li>
</div>
<div id="q1"  style="visibility:hidden">
   <li>
      <h3>2. Paper comes from... </h3>
      <input type="radio" name="question1" value="A">Water<br>
      <input type="radio" name="question1" value="B">Cement<br>
      <input type="radio" name="question1" value="C">Trees<br>
      <input type="radio" name="question1" value="D">The Sky<br>
   </li>
</div>
<div id="q2"  style="visibility:hidden">
   <li>
      <h3>3. How many hours in a day? </h3>
      <input type="radio" name="question2" value="A">24<br>
      <input type="radio" name="question2" value="B">22<br>
      <input type="radio" name="question2" value="C">16<br>
      <input type="radio" name="question2" value="D">48<br>
   </li>
</div>

我目前没有显示下一个div并隐藏前一个div的脚本，因为我不知道如何开始。

我希望把它放到这种形式...... 

function nextQ(){
  // code
}

...并且可以通过此按钮调用它：

<button onclick="next()">Next Question</button>

我是HTML和JavaScript的新手，非常感谢您的帮助。

感谢。

5 个答案:

答案 0 :(得分：4)

Pure JavaScript版本（config）：

＆＃13;
＆＃13; 
var showing = [1, 0, 0];
var questions = ['q0', 'q1', 'q2'];
function next() {
    var qElems = [];
    for (var i = 0; i < questions.length; i++) {
        qElems.push(document.getElementById(questions[i]));   
    }
    for (var i = 0; i < showing.length; i++) {
        if (showing[i] == 1) {
            qElems[i].style.display = 'none';
            showing[i] = 0;
            if (i == showing.length - 1) {
                qElems[0].style.display = 'block';
                showing[0] = 1;
            } else {
                qElems[i + 1].style.display = 'block';
                showing[i + 1] = 1;
            }
            break;
        }
    }      
}
＆＃13; 
<div id="questions">
<div id="q0">
<h3>1. The color of the sky is... </h3>
<input type="radio" name="question0" value="A">Green<br>
<input type="radio" name="question0" value="B">Blue<br>
<input type="radio" name="question0" value="C">Red<br>
<input type="radio" name="question0" value="D">Purple<br>
</div>
<div id="q1"  style="display: none">
<h3>2. Paper comes from... </h3>
<input type="radio" name="question1" value="A">Water<br>
<input type="radio" name="question1" value="B">Cement<br>
<input type="radio" name="question1" value="C">Trees<br>
<input type="radio" name="question1" value="D">The Sky<br>
</div>
<div id="q2"  style="display: none">
<h3>3. How many hours in a day? </h3>
<input type="radio" name="question2" value="A">24<br>
<input type="radio" name="question2" value="B">22<br>
<input type="radio" name="question2" value="C">16<br>
<input type="radio" name="question2" value="D">48<br>
</div>
</div>
    
<button onclick="next()">Next Question</button>
＆＃13;
＆＃13;
＆＃13;

纯JavaScript版本（无配置）：

＆＃13;
＆＃13; 
function next() {
    var qElems = document.querySelectorAll('#questions>div');
    for (var i = 0; i < qElems.length; i++) {
        if (qElems[i].style.display != 'none') {
            qElems[i].style.display = 'none';
            if (i == qElems.length - 1) {
                qElems[0].style.display = 'block';
            } else {
                qElems[i + 1].style.display = 'block';
            }
            break;
        }
    }      
}
＆＃13; 
<div id="questions">
<div id="q0">
<h3>1. The color of the sky is... </h3>
<input type="radio" name="question0" value="A">Green<br>
<input type="radio" name="question0" value="B">Blue<br>
<input type="radio" name="question0" value="C">Red<br>
<input type="radio" name="question0" value="D">Purple<br>
</div>
<div id="q1" style="display: none;">
<h3>2. Paper comes from... </h3>
<input type="radio" name="question1" value="A">Water<br>
<input type="radio" name="question1" value="B">Cement<br>
<input type="radio" name="question1" value="C">Trees<br>
<input type="radio" name="question1" value="D">The Sky<br>
</div>
<div id="q2" style="display: none;">
<h3>3. How many hours in a day? </h3>
<input type="radio" name="question2" value="A">24<br>
<input type="radio" name="question2" value="B">22<br>
<input type="radio" name="question2" value="C">16<br>
<input type="radio" name="question2" value="D">48<br>
</div>
</div>
    
<button onclick="next()">Next Question</button>
＆＃13;
＆＃13;
＆＃13;

jQuery版本：

＆＃13;
＆＃13; 
$(function() {
    $('.next').on('click', function() {
        $('#questions>div').each(function() {
            var id = $(this).index();
            if ($(this).is(':visible')) {
                $(this).hide();
                if (id == $('#questions>div').length - 1) {
                    $('#questions>div').eq(0).show();
                } else {
                    $('#questions>div').eq(id + 1).show();
                }
                return false;
            }
        });
    });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="questions">
<div id="q0">
<h3>1. The color of the sky is... </h3>
<input type="radio" name="question0" value="A">Green<br>
<input type="radio" name="question0" value="B">Blue<br>
<input type="radio" name="question0" value="C">Red<br>
<input type="radio" name="question0" value="D">Purple<br>
</div>
<div id="q1"  style="display: none">
<h3>2. Paper comes from... </h3>
<input type="radio" name="question1" value="A">Water<br>
<input type="radio" name="question1" value="B">Cement<br>
<input type="radio" name="question1" value="C">Trees<br>
<input type="radio" name="question1" value="D">The Sky<br>
</div>
<div id="q2"  style="display: none">
<h3>3. How many hours in a day? </h3>
<input type="radio" name="question2" value="A">24<br>
<input type="radio" name="question2" value="B">22<br>
<input type="radio" name="question2" value="C">16<br>
<input type="radio" name="question2" value="D">48<br>
</div>
</div>
    
<button class="next">Next Question</button>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

虽然我同意@Bitwise关于在javascript上使用jQuery来确保跨浏览器兼容性。但是既然你坚持使用javascript，这就是你应该做的。

1）确保您的<li>首先包含在容器标记中（例如，<ul>），这样您只能遍历所需的列表。

2）使用display:none属性而不是visibility:hidden。 visibility:hidden只是隐藏一个元素，但它仍然会占用与以前相同的空间。 display:none隐藏了一个元素，它不会占用任何空间。

这是更新的代码。

<强> HTML： 

<ul id="listContainer">
<div id="q0">
      <li style="display:list-item">
          <h3>1. The color of the sky is... </h3>
          <input type="radio" name="question0" value="A"/>Green<br/>
          <input type="radio" name="question0" value="B"/>Blue<br/>
          <input type="radio" name="question0" value="C"/>Red<br/>
              <input type="radio" name="question0" value="D"/>Purple<br/>
      </li>
    </div>

    <div id="q1"  >
      <li style="display:none">
        <h3>2. Paper comes from... </h3>
          <input type="radio" name="question1" value="A"/>Water<br/>
          <input type="radio" name="question1" value="B"/>Cement<br/>
          <input type="radio" name="question1" value="C"/>Trees<br/>
              <input type="radio" name="question1" value="D"/>The Sky<br/>
      </li>
    </div>
    <div id="q2" >
      <li  style="display:none">
        <h3>3. How many hours in a day? </h3>
          <input type="radio" name="question2" value="A"/>24<br/>
          <input type="radio" name="question2" value="B"/>22<br/>
          <input type="radio" name="question2" value="C"/>16<br/>
          <input type="radio" name="question2" value="D"/>48<br/>
      </li>
    </div>
</ul>
    <button id="next">next</button>

<强>使用Javascript： 

document.getElementById('next').addEventListener("click",function(){

    var listContainer = document.getElementById("listContainer");
    var listItem = listContainer.getElementsByTagName("li");

    for (var i=0; i < listItem.length-1; i++) 
    {
        if(listItem[i].style.display == "list-item")
        {
            listItem[i].style.display = "none";
            listItem[i+1].style.display = "list-item";
            break;
        }
    }

});

这是fiddle。

干杯！

答案 2 :(得分：1)

我会稍微扭曲代码。将问题类添加到每个作为问题的div中，即.question {display：none}。将活动类添加到第一个问题（即.active {display：block}，它显示第一个问题。查找带有问题类的所有div并将它们添加到变量中，按下每个下一个按钮，从当前问题中删除活动类添加活动使用类的问题使用类的问题使用Javascript的classList.add和classList.remove转到下一个div，直到达到最后一个问题.Count保留当前问题的编号。 我已经在codepen http://codepen.io/dwanirdesh/pen/EaQOPg

中完成了它

或直接从下面编码：

<div id="q0" class="question active">
<li>
<h3>1. The color of the sky is... </h3>
<input type="radio" name="question0" value="A">Green<br>
<input type="radio" name="question0" value="B">Blue<br>
<input type="radio" name="question0" value="C">Red<br>
<input type="radio" name="question0" value="D">Purple<br>
</li>
</div>
<div id="q1" class="question" >
<li>
<h3>2. Paper comes from... </h3>
<input type="radio" name="question1" value="A">Water<br>
<input type="radio" name="question1" value="B">Cement<br>
<input type="radio" name="question1" value="C">Trees<br>
<input type="radio" name="question1" value="D">The Sky<br>
</li>
</div>
<div id="q2"  class="question">
<li>
<h3>3. How many hours in a day? </h3>
<input type="radio" name="question2" value="A">24<br>
<input type="radio" name="question2" value="B">22<br>
<input type="radio" name="question2" value="C">16<br>
<input type="radio" name="question2" value="D">48<br>
</li>
</div>

<button onclick="next()">Next Question</button>

## CSS ##
.question{
  display:none
}

.active{
  display:block
}

## JAVASCRIPT ##

var questionNumber=0;
var questions=document.querySelectorAll('.question');
        function next(){
          questionNumber++;
          if(questions.length>questionNumber)
          {
                document.querySelector('.active').classList.remove('active');
                questions[questionNumber].classList.add('active');
          }
        }

答案 3 :(得分：0)

这是java脚本函数代码。为此，您需要确保将div显示属性设置为或在html代码中。此外，您需要将按钮的ID命名为“next”，以便在到达最后一个按钮时隐藏它。

function nextQ(){
   var  blockFound = 0;
   var lastQuestion = 0;
   var divs = document.getElementsByTagName("div");
   for(var i = 0; i < divs.length; i++){
   if ( blockFound == 1){
    blockFound = 0;
    divs[i].style.display = 'block'; 
    }else if ( divs[i].style.display == 'block' ){
    if ( i + 2 == divs.length){
        lastQuestion = 1;
    }
    blockFound = 1;
   divs[i].style.display = 'none'; 
   }
 }
if ( lastQuestion == 1){
    document.getElementById('next').style.visibility = 'hidden';  
   }  
 }

这里是Html代码。 

<div id="q0" style="display:block">
<li>
<h3>1. The color of the sky is... </h3>
<input type="radio" name="question0" value="A">Green<br>
<input type="radio" name="question0" value="B">Blue<br>
<input type="radio" name="question0" value="C">Red<br>
<input type="radio" name="question0" value="D">Purple<br>
</li>
</div>
<div id="q1"  style="display:none">
<li>
<h3>2. Paper comes from... </h3>
<input type="radio" name="question1" value="A">Water<br>
<input type="radio" name="question1" value="B">Cement<br>
<input type="radio" name="question1" value="C">Trees<br>
<input type="radio" name="question1" value="D">The Sky<br>
</li>
</div>
<div id="q2"  style="display:none">
<li>
<h3>3. How many hours in a day? </h3>
<input type="radio" name="question2" value="A">24<br>
<input type="radio" name="question2" value="B">22<br>
<input type="radio" name="question2" value="C">16<br>
<input type="radio" name="question2" value="D">48<br>
</li>
</div>
<button id="next" onclick="nextQ()">Next Question</button>

答案 4 :(得分：-1)

这是你需要的吗？

  <div id="q0">
  <li>
  <h3>1. The color of the sky is... </h3>
  <input type="radio" name="question0" value="A">Green<br>
  <input type="radio" name="question0" value="B">Blue<br>
  <input type="radio" name="question0" value="C">Red<br>
  <input type="radio" name="question0" value="D">Purple<br>
  </li>
  <button class="next" onclick="goNext(0)">Next Question</button>
  </div>

  <div id="q1"  style="display:none">
  <li>
  <h3>2. Paper comes from... </h3>
  <input type="radio" name="question1" value="A">Water<br>
  <input type="radio" name="question1" value="B">Cement<br>
  <input type="radio" name="question1" value="C">Trees<br>
  <input type="radio" name="question1" value="D">The Sky<br>
  </li>
  <button class="next" onclick="goNext(1)">Next Question</button>
  </div>

  <div id="q2"  style="display:none">
  <li>
  <h3>3. How many hours in a day? </h3>
  <input type="radio" name="question2" value="A">24<br>
  <input type="radio" name="question2" value="B">22<br>
  <input type="radio" name="question2" value="C">16<br>
  <input type="radio" name="question2" value="D">48<br>
  </li>
  <button class="next" onclick="goNext(2)">Next Question</button>
  </div>

  <script language=javascript>
      function goNext(i)
      {
          document.getElementById("q"+i).style.display = 'none'; 
          i++;
          document.getElementById("q"+i).style.display = 'block'; 
      }
  </script>
相关问题
最新问题