4

好的，所以我一直在建立这个网站。其中一个页面是新闻源 www.wenotelling.x10.mx/news/ 新闻页面中嵌入了新闻源页面，这是实际更新发生的地方。一切都很好，而且该网页似乎可以正常工作。我有两个问题。

  1. 加载页面时，新闻源似乎没有更新，而是在页面刷新时加载。
  2. 我想添加笑脸。

所以我写了一些 JScript 来一次性解决这两个问题。由于新闻源是通过 HTML 页面更新的，而且我不想每次都去寻找笑脸的 URL，所以我想出了以下代码： http ://www.wenotelling.x10.mx/news/smilescript .js

$(document).ready(function() 
{
    alert("Called");
    document.getElementByClass('happy').innerHTML = '<img src="smileys/happy.gif"></img>';
    document.getElementByClass('star').innerHTML = '<img src="smileys/star.gif"></img>';
    document.getElementByClass('dead').innerHTML = '<img src="smileys/dead.gif"></img>';
    document.getElementByClass('yawn').innerHTML = '<img src="smileys/yawn.gif"></img>';
    document.getElementByClass('snub').innerHTML = '<img src="smileys/snub.gif"></img>';
    document.getElementByClass('relax').innerHTML = '<img src="smileys/relax.gif"></img>';
    document.getElementByClass('devil').innerHTML = '<img src="smileys/devil.gif"></img>';
    document.getElementByClass('cool').innerHTML = '<img src="smileys/cool.gif"></img>';
    document.getElementByClass('wink').innerHTML = '<img src="smileys/wink.gif"></img>';
    document.getElementByClass('shock').innerHTML = '<img src="smileys/shock.gif"></img>';
    document.getElementByClass('bigsmile').innerHTML = '<img src="smileys/bigsmile.gif"></img>';
    document.getElementByClass('confused').innerHTML = '<img src="smileys/confused.gif"></img>';
    document.getElementByClass('sad').innerHTML = '<img src="smileys/sad.gif"></img>';
    document.getElementByClass('angry').innerHTML = '<img src="smileys/angry.gif"></img>';
    document.getElementByClass('clown').innerHTML = '<img src="smileys/clown.gif"></img>';
    document.getElementByClass('blush').innerHTML = '<img src="smileys/blush.gif"></img>';
    if(location.hash !="#");
    {
        location = "#";
        location.reload(true);
    }
    alert("A-OK");
});

因此，在编辑时我们可以简单地将<smiley class="happy"></smiley>. 我知道笑脸不是真正的标签，但我不认为它会有所作为，因为我以前见过“假标签”。我尝试将笑脸标签更改为，<div class="happy"></div>但这也不起作用。在脚本的最后，我放了一个刷新函数。

无论如何，脚本不起作用。它被调用，但不起作用。所以我通过 Firebug 运行它。Firebug 给出了以下消息：

SyntaxError: missing ) after argument list
[Break On This Error]   
(22 out of range 21)

然后我查看了脚本，好吧，所有的 ) 似乎都在那里。不仅如此，第 22 行之前的笑脸也不起作用。

无论如何。任何想法为什么：1）笑脸没有出现？2) 脚本没有被完全执行？

4

3 回答 3

5

有时 javascript 错误有点误导，但至少可以在您的代码中发现一个语法错误：

 if(location.hash !="#");{

有一个额外的;。也许这就是原因。

顺便说一句，既然您无论如何都在使用 jQuery，为什么不将它用于元素选择和 html 内容设置呢？

于 2012-12-22T14:21:50.827 回答
5

在您链接到的脚本中，第 19 行：

if(location.hash !="#");{

那个分号不应该在那里。（顺便说一句，if块内的行应该缩进）

此外，没有document.getElementsByClass, onlydocument.getElementsByClassName和返回 NodeList 而不是单个元素这样的东西（因此更改它innerHTML不会有太大作用。）

其他注意事项：

  • 在您的网站中，您包含css/stylesheet.css两次（第 4 行和第 12 行），实际上是 3 次，如果您计算 iframe 内的那个。

  • 您使用的 jquery 版本已经过时了，在这种情况下包含 jquery 是不合理的——您只是用它$(document).ready来做window.onload一个，或者只是将脚本放在靠近</body>

  • 正如评论中所说，我完全同意，不要只是在这些元素中粘贴图像。添加适当的 CSS 类，并让 CSS 处理它。

于 2012-12-22T14:22:57.433 回答
0

您应该立即修复的几件事是调用不存在的方法和杂散分号。第一个是您对 的调用getElementByClass，它是单数而不是复数。其次，这里有一个不合适的分号：if(location.hash !="#");.

由于您使用的是 jQuery，因此我鼓励您避免使用类似 的本机方法getElementsByClass，因为在某些较旧的浏览器中不存在这种方法。相反，尝试这样的事情：

var emoticons = ["happy","star","dead","yawn"];

$(document).ready(function () {
    $.each(emoticons, function (index, value) {
        $("<img>", {src: "smileys/" + value + ".gif"}).appendTo("." + value);
    });
});​

请注意，我们不会一遍又一遍地为每个表情符号重复自己。我鼓励您研究精灵，因为它们通常可以更好地解决此类问题。但那是另一天。

演示：http: //jsfiddle.net/yRSF9/

于 2012-12-22T14:49:41.513 回答