JavaScript实现点击标题显示“正在加载中...”

很早就看到了Ben's Blog的这篇文章：JQ实现点击标题时显示“正在加载中...”。

这段代码实现了一个较简单但非常友好的功能：点击文章标题之后，标题文字会变成“正在努力加载中...”的字样。

功能很简单，所以代码很少，用jQuery编写出来的代码只有几行。

但我觉得是有缺点的：如果仅仅为了这么几行代码就去引用比较大的jQuery库的话，不免有些小题大做。所以我就用JavaScript来编写了几句代码，来实现同样的功能（最近在学习JavaScript，显摆一下~），避免了引用jQuery所带来的加载速度变缓的问题。

下面是代码，只需放在页面</body>标签之前即可：

<script>
// 取得带有链接的h1标题，存放在titles数组中
var titles = document.querySelectorAll("h1 a");
// 遍历数组
for (var i=0;i<titles.length;i++) {
    //添加鼠标点击事件
    titles[i].onclick = function() {
        // 改变标题文本
        var title = this.lastChild.nodeValue;
        var retitle = this;
        this.lastChild.nodeValue = "正在努力加载中...";
        // 2秒后恢复标题文本（如果2秒后链接还没跳转的话）
        setTimeout(function(){retitle.lastChild.nodeValue = title;},2000);
    }
}
</script>

对于使用wordpress的博主来说，只需把上面的代码复制到当前主题的footer.php中，</body>标签之前即可。

如果你只想把上述功能应用到某些<div>中，比如说只应用到ID为content的<div>块中，那么你可以把上述第三行代码改为这样：

var titles = document.querySelectorAll("#content h1 a");

同理，如果是class为post的<div>块，你可以这样改变：

var titles = document.querySelectorAll(".post h1 a");

限定了范围之后，就可以实现特定区域（比如说文章区域）的专有效果了。

代码中的最后一句中的2000是2000毫秒，即2秒，意思我已经在代码中标注了出来，就是2秒后可恢复标题文本。可酌情修改，也可以直接去掉这句代码，都是没有影响的。