0

我正在尝试用 div 创建一个“图表”。如果用户单击下一步，它将显示下一个 div 等等（这已完成），但我想要达到的是，有时某些 div 会有一个带有“是”或“否”按钮的问题，而那些按钮将针对某些特定的 div。

例如：Div 1 - 你还好吗？是 - 转到第 2 部分 | 否 - 转到第 3 部分。

有没有办法让这个动态？所有 div 都有一个 ID。

这是我到目前为止的代码。

HTML

 <div id="main">   
  <h3 class="despistes">Some Title</h3>
      <div class="info" id="1" style="display:block">Div 1</div>
      <div class="info" id="2">Div 2</div>
      <div class="info" id="3">Div 3</div>
      <div class="info" id="4">Div 4</div>
      <div class="info" id="5">Div 5</div>
      <div class="info" id="6">Div 6</div>
      <div class="info" id="7">Div 7</div>
      <div class="info" id="8">Div 8</div>

 <button class="button" onclick="mostraDiv('inicio')" style="float:left">inicio</button>
 <button class="button" onclick="mostraDiv('avancar')" style="float:right">seguinte</button>
 <button class="button" onclick="mostraDiv('anterior')" style="float:right">retroceder</button>

</div>

JS

var divNo = 0;
function mostraDiv(direction) {
  var sel = document.getElementById('main').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
  switch (direction) {
    case 'inicio' : divNo = 0; break;
    case 'anterior' : divNo--;   break;
    case 'avancar' : divNo++;   break;
    case 'ultima' : divNo = sel.length-1; break;

  }
  if (divNo > sel.length-1) { divNo = 0; }
  else { if (divNo < 0) { divNo = sel.length-1; } }
  sel[divNo].style.display = 'block';
}

onload = function() {
  mostraDiv('s');
};

我在这里找到的这个功能对我来说很好用。

提前致谢。

4

1 回答 1

1

尝试这个 ：

<p>Are You OK ?</p>
<button class="button" onclick="goToDiv(2)" style="float:left">Yes</button>
<button class="button" onclick="goToDiv(3)" style="float:left">No</button>

function goToDiv(divNo) {
  var sel = document.getElementById('main').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
  if (divNo > sel.length-1) { divNo = 0; }
  else { if (divNo < 0) { divNo = sel.length-1; } }
  sel[divNo].style.display = 'block';
}
于 2013-11-04T13:06:40.580 回答