通过单击遍历一个 div 数组

Question

我有一个带有“上一个”和“下一个”按钮的页面来遍历一个 div 数组。

单击下一个按钮会将 var 'click' 索引的下一个 div 复制到 #place 的 innerHTML。

单击上一个按钮将复制上一个 div，就像您想象的那样。

问题是，当我交替单击按钮时（单击上一个和下一个，上一个然后下一个...），div 将保持原样，不会更改为下一个或上一个 div，除非我单击相同按钮两次。

当交替单击时，一条简单的警报消息将确认功能正在执行。这是怎么回事？谢谢。

var clicks = 0;
var pageDivs = document.getElementsByClassName("plist");
var displayPanel = document.getElementById("place");

function g() {
  if (clicks >= pageDivs.length) {
    clicks = 0;
  }
  displayPanel.innerHTML = pageDivs[clicks].innerHTML;

  clicks += 1;
}

function f() {
  clicks -= 1;

  if (clicks < 0) {
    clicks = pageDivs.length - 1;
  }

  displayPanel.innerHTML = pageDivs[clicks].innerHTML;

}

.plist {
  display: none;
}

#place {
  background-color: lightskyblue;
  min-height: 5%;
  min-width: 10%;
}

<div id="place">
  <p></p>
</div>
<div class="plist">
  <p>Testing 1</p>
</div>

<div class="plist">
  <p>Testing 2</p>
</div>

<div class="plist">
  <p>Testing 3</p>
</div>

<div class="plist">
  <p>Testing 4</p>
</div>

<div class="plist">
  <p>Testing 5</p>
</div>


<button type="button" onclick="f()" style="width: 10%;">Previous</button>
<button type="button" onclick="g()" style="width: 10%;">Next</button>

Answer 1

你需要在同一个地方不断地加减。

但不需要两个函数

注意：为了进一步改进，只需隐藏和显示，而不是在 DOM 中插入代码

var clicks = -1, // necessary for initial next clicking
    pageDivs = document.getElementsByClassName("plist"),
    displayPanel = document.getElementById("place"),
    len = pageDivs.length;

function copyIt(direction) {
  clicks += direction;
  if (clicks >= len) clicks = 0;
  else if (clicks < 0) clicks = len - 1;
  displayPanel.innerHTML = pageDivs[clicks].innerHTML;
}

.plist {
  display: none;
}

#place {
  background-color: lightskyblue;
  min-height: 5%;
  min-width: 10%;
}

<div id="place">
  <p></p>
</div>
<div class="plist">
  <p>Testing 1</p>
</div>

<div class="plist">
  <p>Testing 2</p>
</div>

<div class="plist">
  <p>Testing 3</p>
</div>

<div class="plist">
  <p>Testing 4</p>
</div>

<div class="plist">
  <p>Testing 5</p>
</div>


<button type="button" onclick="copyIt(-1)" style="width: 10%;">Previous</button>
<button type="button" onclick="copyIt(1)" style="width: 10%;">Next</button>

Answer 2

当您单击Next 时，首先增加您的计数器。你是在之后做的，这导致了问题。

像这样定义你的函数f：

    function g() {
       clicks += 1; // increment at the start
      ...
    }

var clicks = 0;
var pageDivs = document.getElementsByClassName("plist");
var displayPanel = document.getElementById("place");

function g() {
  clicks += 1;
  if (clicks >= pageDivs.length) {
    clicks = 0;
  }
  displayPanel.innerHTML = pageDivs[clicks].innerHTML;
}

function f() {
  clicks -= 1;

  if (clicks < 0) {
    clicks = pageDivs.length - 1;
  }

  displayPanel.innerHTML = pageDivs[clicks].innerHTML;

}

.plist {
  display: none;
}

#place {
  background-color: lightskyblue;
  min-height: 5%;
  min-width: 10%;
}

<div id="place">
  <p></p>
</div>
<div class="plist">
  <p>Testing 1</p>
</div>

<div class="plist">
  <p>Testing 2</p>
</div>

<div class="plist">
  <p>Testing 3</p>
</div>

<div class="plist">
  <p>Testing 4</p>
</div>

<div class="plist">
  <p>Testing 5</p>
</div>


<button type="button" onclick="f()" style="width: 10%;">Previous</button>
<button type="button" onclick="g()" style="width: 10%;">Next</button>

Answer 3

问题是 clicks 计数器在更新 innerHTML 后得到更新。

将其移至顶部解决了问题。

$(document).ready(function() {
  var clicks = -1;
  var pageDivs = document.getElementsByClassName("plist");
  var displayPanel = document.getElementById("place");
  $("#prev").on("click", f);
  $("#next").on("click", g);

  function g() {
    clicks += 1;
    if (clicks >= pageDivs.length) {
      clicks = 0;
    }

    displayPanel.innerHTML = pageDivs[clicks].innerHTML;
  }

  function f() {
    clicks -= 1;
    if (clicks < 0) {
      clicks = pageDivs.length - 1;
    }
    displayPanel.innerHTML = pageDivs[clicks].innerHTML;

  }
});

.plist {
  display: none;
}

#place {
  background-color: lightskyblue;
  min-height: 5%;
  min-width: 10%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="place">
  <p></p>
</div>
<div class="plist">
  <p>Testing 1</p>
</div>

<div class="plist">
  <p>Testing 2</p>
</div>

<div class="plist">
  <p>Testing 3</p>
</div>

<div class="plist">
  <p>Testing 4</p>
</div>

<div class="plist">
  <p>Testing 5</p>
</div>


<button id="prev" type="button" style="width: 10%;">Previous</button>
<button id="next" type="button" style="width: 10%;">Next</button>