0

我正在尝试通过编写一个基本网站（使用 Twitter Bootstrap）来自学一点 javascript，该网站随机引用古腾堡计划小说中的一句话，对其进行一些讨论，然后页面下方有一个链接可以直接访问到古腾堡计划的小说。

我已经使用这个JavaScript 源脚本取得了很好的效果......对于报价本身。但是当涉及到链接第二个元素时——引用书的链接——按钮中的文本不会出现。

HTML 看起来像这样：

<div class="childquote">
                <p>
                <span id="ran1">&#8220;Quote from a first novel.&#8221;<br>
                - Bram Stoker, <em>Dracula</em></span>
                <span id="ran2">&#8220;Quote from a second novel.&#8221;<br>
                - Herman Melville, <em>Moby Dick</em></span>

稍后在页面下方，按钮 HTML 如下所示：

 <div class="btn pull-right bookbutton">
                <span id="ran1"><a href="http://www.gutenberg.org/ebooks/345">Read the book</a></span>
                <span id="ran2"><a href="http://www.gutenberg.org/ebooks/2701">Read the book</a></span>

...显然，所有适当的 div 都已关闭，等等。

页面的 CSS 将页面上所有随机选项的显示设置为“无”：

#ran1,#ran2,#ran3,#ran4,#ran5,#ran6,#ran7,#ran8,#ran9,#ran10,#ran11,#ran12,#ran13,#ran14,#ran15,#ran16,#ran17,#ran18 {
  display:none;
}

JavaScript 本身看起来像这样：

function messageLoad() {

  var wch=Math.floor(Math.random()*18+1);
  document.getElementById('ran'+wch).style.display='inline';
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  messageLoad();
});

据我了解，因为我根本不懂 JavaScript ，所以 JavaScript 会以某种方式“停用”随机选择的“ranXX”的“display:none”CSS，以便第一部分 - 引用 - 将显示好像没有为该随机数设置“显示：无”。

但是为什么同样的逻辑不适用于链接呢？我得到了随机引用就好了，但按钮文本根本没有出现。

4

1 回答 1

1

该函数被调用getElementById，因此它最多只会返回一个元素。实际上，ID 在页面上应该是唯一的——这就是 ID 的概念。

您可以为链接 ID 提供一个词缀（例如ran1link），以便它们是唯一可识别的，并将两个元素都设置display为inline。

请注意，您的window.onload技巧并不是真正必要的。有addEventListener可以将多个功能附加到一个事件。这样您就不会与其他代码添加onload功能发生冲突。

于 2012-07-10T17:00:38.040 回答