Question

我正在为我的网页设计课程开展一个项目。我们必须为假公司建立一个网站，而不是真正重要的信息。这是HTML，CSS和JavaScript的组合。无论如何，所以我正在制作一个带有表格和所有内容的订单页面，而且我有大量的字段集都有不同的ID，因为它们都会提出不同的问题。我想一次显示一个字段集，并有一个“下一步”按钮，它将隐藏当前字段集并显示下一个字段集。因此每个字段集将设置为

display: none;

直到您按下按钮。我打算用javascript

document.getElementById("").style.display = "block";

这样做。但我刚开始学习javascript几天前，我不知道如何用这么多不同的ID来做这个。我不想为每个字段集创建不同的函数。我总共有24个。我不认为数组会起作用，也不会增加数字ID，因为这些数字不能正常运行吗？对不起，我是JavaScript的新手。任何帮助将不胜感激。

Answer 1

这是让你前进的简单方法。

<html>
 <head>
  <script>
  function NextClicked(incomingStepID)
  {
      document.getElementById("question" + incomingStepID).style.display = "none";
      document.getElementById("question" + (incomingStepID + 1)).style.display = "block";
      document.getElementById("buttonToClick").setAttribute("onclick", "NextClicked(" + (incomingStepID + 1) + ")");
  }
  </script>
 </head>
 <body>
  <div id="NextHolder"><button type="submit" id="buttonToClick" onclick="NextClicked(1);">next</button></div>
  <div id="question1" style="display: block">q1</div>
  <div id="question2" style="display: none">q2</div>
  <div id="question3" style="display: none">q3</div>
  <div id="question4" style="display: none">q4</div>
  </div>
 </body>
</html>

Answer 2

我首先要使用类在CSS中设置所有可见性内容。类似的东西：

.hidden {
  display: none;
}

将您的字段集按显示顺序排列，所有设置为隐藏，但第一个除外：

<fieldset>
...
  <button onclick='next(event)'>Next</button>
</fieldset>
<fieldset class='hidden'>
...
</fieldset>

现在，理想情况下，您将JS中的点击处理程序与HTML页面相关联，但保持简单，您可以像上面那样进行操作。然后，下一个函数只需要获取下一个字段集并清除类名，同时将其自己的字段集的类名设置为“隐藏＆＃39;”。

function next(event) {
  var self = event.target;
  var parent = self.parentNode;
  var nextFieldset = self.nextSibling;
  parent.className = 'hidden';
  nextFieldset.className = '';
}

没有机会对它进行测试，但这应该会让你进入大球场。

Answer 3

我不确定，但我认为您要求的是这样的事情：

您需要为要隐藏的元素添加相同的类。然后它会迭代并隐藏/显示它们。

您不需要使用此代码编辑ID。 Ids可能大不相同。

<input type='text' id="something" class="nextHide" placeholder="1"/> </br>
<input type='text' id="somethingElse" class="nextHide" placeholder="2"/> </br>
<input type='text' id="somethingElseHere" class="nextHide" placeholder="3"/> </br>
<input type='text' id="somethingElseHereToo" class="nextHide" placeholder="4"/> </br>

<button onClick="next()">next</button>

<script>
    // keep track of which element we're at. start at 0 cus arrays.
    var count = 0;

    // get all the elements with class "nextHide" into a somewhat array called 'elements'
    var elements = document.getElementsByClassName("nextHide");

    // show the first input
    elements[0].style.display = "block";

    // next button to hide current an show next
    function next() {
        // hide current
        elements[count].style.display = "none";
        // increment count=> show next element
        elements[++count].style.display = "block";
    }
</script>

<style>
    /*initially hide all elements*/
    .nextHide {
        display: none;
    }
</style>

一种访问所有表单元素的方法，而不为不同的id创建不同的函数

3 个答案: