时间戳

首页 > 解决方案 > 移动到 div 时可以显示隐藏的内容吗？

javascript - 移动到 div 时可以显示隐藏的内容吗？

问题描述

我有一个将类中的所有对象移动到 div 的函数。我设置了一些单选按钮显示：无，但我希望它们在移动到 div 时可见。下面的代码适用于段落，但不适用于单选按钮/标签。有什么办法可以做到这一点？谢谢！

var cCount = 0;

function changeDiv() {
  alert("tochange" + cCount);
  var changeClass = document.getElementsByClassName("Q" + cCount);
  var changeDiv = document.getElementById("question");
  for (var i = 0; i < changeClass.length; i++) {
    changeDiv.innerHTML = changeDiv.innerHTML + changeClass[i];
  }
  cCount++;
}
.Q0 {
  display: none;
}
<div id="question">
  <form>
    <p id="cap" class="Q0"> question 1?</p><br />
    <input type="radio" ID="opt1" name="home" class="Q0" /><label class="Q0">value1</label><br />
    <input type="radio" ID="opt2" name="home" class="Q0" /><label class="Q0">value2</label><br />
  </form>
</div>
<input type="button" id="btn" onclick="changeDiv()" /><label>bnt</label>

标签： javascripthtml

解决方案

就个人而言，我会将Q0类放在单个父 div 上，以使其子级更容易移动，然后将该Q0div 移动到questiondiv。

至于 CSS，您可以隐藏问题，直到使用标签上的position: absolute和单击按钮。visibility: hidden;form

var cCount = 0;

function nextQuestion() {
  var lastQuestionDiv = document.getElementsByClassName("Q" + (cCount - 1))[0];
  var nextQuestionDiv = document.getElementsByClassName("Q" + cCount)[0];
  var questionDiv = document.getElementById("question");
  // Remove last question. Optionally, can do "if (cCount > 0)"
  if (lastQuestionDiv) questionDiv.removeChild(lastQuestionDiv);
  if (nextQuestionDiv) {
    questionDiv.appendChild(nextQuestionDiv);
    cCount++;
  } else {
    // No more questions
  }
}
form {
  position: absolute;
  visibility: hidden;
}
<div id="question">
  <form>
    <div class="Q0">
      <p id="cap"> question 1?</p><br />
      <input type="radio" ID="q1opt1" name="home" /><label>value1</label><br />
      <input type="radio" ID="q1opt2" name="home" /><label>value2</label><br />
    </div>
    <div class="Q1">
      <p id="cap"> question 2?</p><br />
      <input type="radio" ID="q2opt1" name="home" /><label>value1</label><br />
      <input type="radio" ID="q2opt2" name="home" /><label>value2</label><br />
    </div>
  </form>
</div>
<button id="btn" onclick="nextQuestion()">Next Question</button>

推荐阅读