Question

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

＆＃13;

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++;
}

＆＃13;

.Q0 {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 1

就个人而言，我将Q0类放在单个父div上以使其子项更容易移动，然后将Q0 div移至question div。

对于CSS，您可以使用position: absolute标记上的visibility: hidden;和form隐藏问题，直到点击该按钮为止。

＆＃13;

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

＆＃13;

form {
  position: absolute;
  visibility: hidden;
}

＆＃13;

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

＆＃13;

移动到div时，我可以制作隐藏的内容吗？

1 个答案: