使用多个函数声明创建多个 innerHTML 元素

Question

我有以下代码，如果您打开了http://domain.com/10 URL，我想在 HTML 中创建以下链接：

<a href="http://domain.com/5">5</a>
<a href="http://domain.com/6">6</a>
<a href="http://domain.com/7">7</a>
<a href="http://domain.com/8">8</a>
<a href="http://domain.com/9">9</a>
<a href="http://domain.com/10">10</a> // --> You have opened this URL!
<a href="http://domain.com/11">11</a>
<a href="http://domain.com/12">12</a>
<a href="http://domain.com/13">13</a>
<a href="http://domain.com/14">14</a>
<a href="http://domain.com/15">15</a>

这是代码：

(function() {
  function pagination(number) {
    var url = window.location.href;
    var page = parseInt(url.match(/[^/]+$/));
    var link = '<a href="' + url.replace(/[^/]+$/, '') + (page + number) + '">' + (page + number) + '</a>';
    document.getElementById('pagination').innerHTML = link;
    console.log(link);
  };
  for (var i=-5; i<6; i++) {
    pagination(i);
  };
})();

此代码存在一些问题：

• console.log(link); 会将所有必要的行打印到控制台，没有任何问题，但.innerHTML只是将最后一个元素附加到 DOM 中。

• 不知何故，当您站在 0 URL 处时，我想隐藏 -5、-4、-3、-2、-1。

Answer 1

将某些内容分配给innerHTML会将整个元素内容替换为 HTML 内容。您应该改为附加innerHTML：

document.getElementById('pagination').innerHTML += link;

为了防止输出 -5、-4、-3、-2、-1 索引，您可能应该只检查 number 参数是否等于这些值之一，例如：

function pagination(number) {
    if (number > -6 && number < 0) {
        return;
    }
    //
};