通过单击遍历一组div

Question

我有一个以前的＆＃39;和＆＃39; next＆＃39;用于遍历div数组的按钮。

点击下一个按钮将复制由var＆＃39;点击＆＃39;索引的下一个div。进入#place的innerHTML。

单击上一个按钮将复制上一个div，如您所想。

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

一个简单的警告消息将确认交替点击时正在执行的功能。发生了什么事？谢谢。

＆＃13;

＆＃13;

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;

}

＆＃13;

.plist {
  display: none;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要在同一个地方持续添加和减去。

但不需要两个功能

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

＆＃13;

＆＃13;

data.key = value

＆＃13;

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

＆＃13;

.plist {
  display: none;
}

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

问题是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>

Answer 3

点击Next后，首先递增计数器。你之后会这样做，这会导致问题。

像这样定义你的函数f：

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

＆＃13;

＆＃13;

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;

}

＆＃13;

.plist {
  display: none;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;