Question

我有以下代码，如果您打开了http://domain.com/10网址，我想在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网址时我想隐藏-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;
    }
    //
};

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

1 个答案: