时间戳

首页 > 解决方案 > 为什么在 hashchange 事件侦听器中重复输出？

javascript - 为什么在 hashchange 事件侦听器中重复输出？

问题描述

我用#2019-01 #2019-02 等的哈希生成了一年中的月份。每次我点击一个链接时，它都会附加另一个月份列表。

它应该只显示月份链接的一份副本，但输出更新的哈希值。所以如果我点击二月它应该输出#2019-02。

https://jsfiddle.net/captlid/gkhe4naz/3/

var date = new Date();
location.hash = date.getFullYear();
var p = document.querySelector('p');
p.innerHTML = location.hash;

window.addEventListener('hashchange', function() {

   for (dz = 0; dz < 12; dz++) { 
      p.innerHTML += '<a href="'+location.hash+'-'+String("0"+(dz+1)).slice(-2)+'">'+ months[dz] +'</a>&nbsp;';
   }
   p.innerHTML += location.hash; 
});

标签： javascripthashchange

解决方案

您的代码在编写时工作正常。我认为您不小心将日历输出代码包含在 hashchange 函数中。如果将其移到外面，它应该可以按预期工作。此外，您正在p元素而不是calendar元素内部构建日历。下面的代码显示了一个正常运行的版本

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var calendar = document.querySelector('#calendar');
var date = new Date();
location.hash = date.getFullYear();
var p = document.querySelector('p');
p.innerHTML = location.hash;

for (dz = 0; dz < 12; dz++) {
    calendar.innerHTML += '<a href="' + location.hash + '-' + String("0" + (dz + 1)).slice(-2) + '">' + months[dz] + '</a>&nbsp;';
  }

window.addEventListener('hashchange', function() {


  p.innerHTML = location.hash;
});
<div id="calendar"></div>
<p></p>

推荐阅读