通过点击遍历div数组

提问者：小点点

通过点击遍历div数组

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

单击next按钮将把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>

共3个答案

匿名用户

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

但不需要两个功能

注意：为了进一步改进，只需隐藏和显示，而不是将代码插入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>

匿名用户

当您单击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>

匿名用户

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

通过点击遍历div数组

共3个答案

相关问题

热门标签

通过点击遍历div数组

共3个答案

相关问题

热门标签

微信关注