如何在JavaScript中创建简单的历史记录跟踪器？

Question

寻找一种跟踪JavaScript中点击次数的方法。我在一个独立的div包装器中有一系列javascript控制的侧面。我需要一个计数器来跟踪上次点击的幻灯片编号。当新div加载时，这将用于淡出前一个div。 HTML页面不会重新加载，所以我认为我不能使用浏览器历史记录功能作为选项。我真的只需要知道之前的幻灯片编号，因为可以点击幻灯片编号。

Answer 1

每次点击新幻灯片时，您都可以创建一个变量并进行更新，但我认为更简单地淡出所有幻灯片，然后淡入点击的幻灯片。

这样您就不需要知道当前显示的是哪张幻灯片。

列昂

Answer 2

如果您希望用户永远不会重新加载页面，那么是什么阻止您使用常规JavaScript变量？

var currentSlideIndex = 0;
function nextSlide() {
  currentSlide = currentSlide + 1;
  if (currentSlide >= slideCount) {
    currentSlide = 0;
  }
}

您会发现许多类似的HTML5-slide包，跟踪浏览器的文档片段标识符中的当前幻灯片。当你这样做时，幻灯片可以在F5中存活，用户可以通过复制/粘贴地址发送到当前幻灯片的链接。

Answer 3

最好的选择是使用History.js，但这有点过分。奖金是它的语义，并将保持状态在浏览器重新加载。后退按钮也会转到上一个标签页。

其他解决方案取决于您的设置和可用的库（jQuery等）。如果您正在使用标准插件，它们通常会在状态发生变化时进行回调。检查API。

基本算法是对每个按钮应用单击处理程序。您可以存储包含当前状态的全局变量。将类似.slideButtons的类添加到绝对按钮（第1页，第2页，第3页等），并将#nextSlide和#prevSlide的ID选择性地添加到下一个和上一个按钮。在处理程序中，检查类和id。如果是nextSlide或prevSlide，请添加一个或减去一个，然后更新。如果它是绝对的一个，则在父节点中搜索并计算匹配的类，直到找到您要查找的类。到达按下按钮时计数器的编号是新状态。设置它，然后更新滑块。