javascript - 我可以让隐藏的内容在移动到 div 时出现吗？

Question

我有一个函数可以将一个类中的所有对象移动到一个 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>

Answer 1

我个人会把 Q0在单父 div 上类以使其子级更容易移动，然后移动 Q0 div 到 question分区

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