-3

我正在尝试编写一段 JavaScript 代码，让我可以使用箭头在博客文章中来回切换。

我认为最简单和最简单的方法是id在锚点中添加标签，这些标签会转到上一个-下一个帖子，然后让 JavaScripthref从锚点中读取。

我用谷歌搜索并让它工作——我相信我在这里找到了答案——但我有这个问题——代码在第一篇文章中不起作用。我认为这是因为没有previd，我得到一个TypeError: document.getElementById(...) is null. 这以某种方式停止了代码的执行，而且我也无法获得hrefid prev。

我该如何解决？

这是一个 HTML 演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>

    <script type="text/javascript">
        var nextpage;
        var prevpage;

        window.onload=function()
        {
            prevpage = document.getElementById("prev").getAttribute("href");
            nextpage = document.getElementById("next").getAttribute("href");
        }

        document.onkeydown = function(evt)
        {
            evt = evt || window.event;
            switch (evt.keyCode)
            {
                case 37:
                    if (typeof prevpage !== 'undefined') window.location = prevpage;
                    break;
                case 39:
                    if (typeof nextpage !== 'undefined') window.location = nextpage;
                    break;
            }
        };
    </script>
</head>

<body>

<ul>
    <li class="previous"><a id="prev" href="http://www.yahoo.com">&laquo; <span>Previous Post</span></a></li>
    <li class="next"><a id="next" href="http://www.google.com"><span>Next Post</span> &raquo;</a></li>
</ul>

</body>

</html>
4

3 回答 3

1

如果您尝试读取 null 的属性，它将引发错误。所以你需要在阅读它之前测试它是否存在。

    window.onload=function()
    {

        var prevElem = document.getElementById("prev");
        var nextElem = document.getElementById("next");

        prevpage = prevElem ? prevElem.href || null;
        nextpage = nextElem ? nextElem.href || null;
    }

    document.onkeydown = function(evt)
    {
        evt = evt || window.event;
        switch (evt.keyCode)
        {
            case 37:
                if (prevpage) window.location = prevpage;
                break;
            case 39:
                if (nextpage) window.location = nextpage;
                break;
        }
    };
于 2013-03-21T12:52:00.310 回答
0

在这种情况下，您必须测试是否document.getElementById()返回 DOM 元素引用或null，因为尝试访问的属性会null导致错误。

window.onload=function()
{
    var prevpage = document.getElementById("prev"),
        nextpage = document.getElementById("next");
    document.onkeydown = function(evt)
    {
        evt = evt || window.event;
        switch (evt.keyCode)
        {
            case 37:
                if (prevpage) window.location = prevpage.href;
                break;
            case 39:
                if (nextpage) window.location = nextpage.href;
                break;
        }
    };
};

null被认为是一个虚假值，因此它不会进入if您的开关内部的块。

假设next/prev是锚<a>，您可以直接访问它们的href属性，而无需使用getAttribute.

于 2013-03-21T12:51:36.517 回答
0

我发现了问题。

prevpage = document.getElementById("prev").getAttribute("href");给出一个 TypeError，它会停止执行。我需要做的是首先检查是否document.getElementById("prev")为空。如果不是，那我可以getAttribute("href")

我需要getAttribute("href")是因为我想获取本地文件 --ie post30.html，而不是http://www.example.com/post30.html. 我忘了提那个。

这就是代码的样子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>

    <script type="text/javascript">
        var nextpage;
       var prevpage;

       window.onload=function()
        {   
           var temp;

           temp = document.getElementById("prev");  
            if (temp) prevpage = temp.getAttribute("href")

           temp = document.getElementById("next");
            if (temp) nextpage = temp.getAttribute("href")

        }

       document.onkeydown = function(evt)
        {
           evt = evt || window.event;
            switch (evt.keyCode)
            {
                case 37:
                    if (prevpage) window.location = prevpage;
                    break;
                case 39:
                    if (nextpage) window.location = nextpage;
                    break;
            }
        };
    </script>
</head>

<body>

<ul>
    <li class="previous"><a id="prev" href="next.html">&laquo; <span>Previous Post</span></a></li>
    <li class="next"><a id="next" href="prev.html"><span>Next Post</span> &raquo;</a></li>
</ul>

</body>

</html>
于 2013-04-12T21:25:37.597 回答