Question

我正在使用jquery将侧栏加载到我的每个页面中，侧边栏包含一个故事名称列表，日期和内容类型（故事，文章，新闻，等等）放在无序列表中，当每个页面加载时，我使用jquery的.load（）函数将侧边栏信息加载到当前页面的无序列表中，一旦侧边栏信息加载，我使用另一个脚本将侧边栏中当前故事的href设置为＃。问题是，如果我在函数之前放置一个警报，那么将href设置为＃的代码片段就会起作用。

以下是流程：

用户点击故事（让我们调用故事nothing.html）

nothing.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../../../../css/reset.css">
    <link rel="stylesheet" href="../../../../css/index.css">
    <script type="text/javascript" src="../../../../js/jquery.js"></script>
    <script type="text/javascript" src="../../../../js/storyLoadSidebar.js"></script>
    <script type="text/javascript" src="../../../../js/disableLink.js"></script>
    <title> Nothing </title>
</head>

<body>

    <div id="container">

        <div id="main">

            <article>

                <header>
                    <h3> Nothing Here </h3>
                    <time pubdate="pubdate"> July 19, 2011 </time>
                </header>

                <p> I said there was nothing here, yet. </p>

            </article>

        </div>

        <div id="listWrapper">
            <div id="storyList">
                <ul></ul>
            </div>
        </div>

    </div>

</body>

</html>

storyLoadSidebar.js

$(document).ready(function() {
    $("ul").load("../../../../sidebar.html ul");
});

sidebar.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
</head>

<body>  

    <ul>

        <li>
            <div class="catDate">
                <p> Nothing </p>
                <time pubdate="pubdate"> 2011-07-19 </time>
            </div>

            <div class="storyTitle">
                <a id="nothing" href="stories/2011/07/19/nothing.html"> Nothing Here, Yet. </a>
            </div>
        </li>

    </ul>

</body>

</html>

然后最后禁用链接的脚本：

disableLink.js

$(document).ready(function() {
    var fullPath = window.location.pathname;
    var pageName = fullPath.substring(fullPath.lastIndexOf('/') + 1).replace('.html', '');
    $('#' + pageName).attr('href', '#');
});

整个事情只能在href修改之前添加警告到disableLink.js，如下所示：

$(document).ready(function() {
    var fullPath = window.location.pathname;
    var pageName = fullPath.substring(fullPath.lastIndexOf('/') + 1).replace('.html', '');
    alert('now it will work');
    $('#' + pageName).attr('href', '#');
});

这里有什么问题，为什么只有在我添加警报时它才有效？

Answer 1

原因是$("ul").load("...")需要一些时间来加载。

您可以为其分配回调功能，以便下一段代码仅在完成时运行

$("ul").load("../../../../sidebar.html ul",function () {
   var fullPath = window.location.pathname;
   var pageName = fullPath.substring(fullPath.lastIndexOf('/') + 1).replace('.html', '');
   $('#' + pageName).attr('href', '#');
})

Jquery更改href属性仅在我添加alert（）函数时有效

1 个答案: