Question

我正在寻找一种方法来在每次加载页面时更改html的一部分。

例如

我有三个链接：

<a href="http://www.google.com/test1">google test one</a>
<a href="http://www.google.com/test2">google test two</a>
<a href="http://www.google.com/test3">google test three</a>

每当有人加载页面时，链接都会发生变化。

页面版本1：

<table style="border: 1px solid black"><td>  <a href="http://www.google.com/test1">google test one</a></td></table>

页面版本2：

  <table style="border: 1px solid black"><td>  <a href="http://www.google.com/test2">google test two</a></td></table>

页面版本3：

<table style="border: 1px solid black"><td>  <a href="http://www.google.com/test3">google test three</a></td></table>

有没有办法做到这一点？也许是javascript？我只知道HTML，所以我不太擅长这种事情。我试过在谷歌上搜索，但我不知道该搜索什么。

Answer 1

实现您想要的最简单方法，请记住，这种动态行为需要客户端（javascript）或服务器端（ruby，php等）解决方案，是以下方法：

var linksList = [
    'http://google.com/',
    'http://stackoverflow.com/',
    'http://slashdot.org/'
    ],
    el = document.getElementById('demo'),
    randomNumber = Math.floor(Math.random() * linksList.length);

el.href = linksList[randomNumber];
el.textContent = linksList[randomNumber];

JS Fiddle demo

以下稍微复杂一些（它做同样的事情，但使用一组对象为每个链接提供更多可配置的选项）：

var linksList = [{
    'url': 'http://google.com/',
        'text': 'Google.com'
}, {
    'url': 'http://stackoverflow.com/',
        'text': 'Programming Q&A'
}, {
    'url': 'http://slashdot.org/',
        'text': 'Slashdot: News for Nerds'
}],
    el = document.getElementById('demo'),
    randomNumber = Math.floor(Math.random() * linksList.length);

el.href = linksList[randomNumber].url;
el.textContent = linksList[randomNumber].text;

JS Fiddle demo

稍微更多复杂（尽管此时变得更易于维护）方法是开始使用可在多个项目上调用的函数：

function randomiseLinks(el, list) {
    if (!el || !list) {
        return false;
    } else {
        var randomNumber = Math.floor(Math.random() * list.length);
        el.href = list[randomNumber].url;
        el.textContent = list[randomNumber].text;
    }
}

var linksList = [{
    'url': 'http://google.com/',
        'text': 'Google.com'
}, {
    'url': 'http://stackoverflow.com/',
        'text': 'Programming Q&A'
}, {
    'url': 'http://slashdot.org/',
        'text': 'Slashdot: News for Nerds'
}],
    links = document.getElementsByTagName('a');

for (var i = 0, len = links.length; i < len; i++) {
    randomiseLinks(links[i], linksList);
}

JS Fiddle demo

以下方法具有上述功能方法的优点，但由于它扩展了Object原型，这意味着可以直接在document.getElementById()或{{返回的元素或nodeList上调用它。 1}}（等等）：

document.getElementsByTagName()

可以如下调用：

document.getElementById('test').randomiseLinks(linksList);

或者：

document.getElementsByTagName('a').randomiseLinks(linksList);

如何在每次加载页面时更改html页面的部分

1 个答案: