jQuery .load() 函数的 JavaScript 语法

Question

我刚刚尝试制作一个简单的脚本来使用 ajax 加载页面的新部分。用于更改相关文本颜色的类删除/添加效果很好。然而，新的html似乎没有出现。我有一种感觉，这与我的一般 js 语法有关，但我无法解决。

Javascript：

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#page_menu a").click(function() {
            $("#page_menu p").removeClass("current");
            $(this).children().addClass("current");

            var project = $(this).attr("name");
            var loadUrl = project + ".html";

            $("#project_image").load(loadUrl);

            return false;
            });
        });
    </script>

html 中锚标记的一个示例是：

<a name=example href="#">Example</a>

我要加载的 html 文件将被称为“example.html”，其中的代码：

<h1>Hello</h1>

我确信它非常简单，但我只是没看到而已！

干杯，

丰富

Answer 1

我会直接使用锚点的 href ：

<a href="example.html">Example</a>
<div id="project_image"></div>

然后 AJAXify 它：

$(function() {
    $('#page_menu a').click(function() {
        $('#page_menu p').removeClass('current');
        $(this).children().addClass('current');
        $('#project_image').load(this.href);
        return false;
    });
});

Answer 2

锚点肯定有一个 name 属性，所以这部分没问题..但为了让事情更清晰，请将锚点更改为：

<a href="example.html">Example</a>

为了长度起见，您可以使用 $(document).ready 的简写语法，并且还在一条链中进行类更改。然后只需加载 href 中指定的页面并查看请求是否实际有效，添加回调，如下所示：

$(function() {
    $("#page_menu a").click(function(e) {
        $("#page_menu p").removeClass("current").filter(this).addClass("current");

        $("#project_image").load(this.href, function(res) {
            // This will allow you to see the response from the server without having to dig through requests
            // If you don't have a console for some reason, just change this to alert()
            console.log(res);
        });

        e.preventDefault();
    });
});