在 jquery 中加载作为参数传递的 html 文件？

Question

我是 jquery 的新手。 我正在尝试创建一个页面，该页面在不重新加载页面的情况下加载内容。 在我的测试页面中，我有 2 个链接，即链接 1 和链接 2。单击默认页面时。 它只是说“你好”。 当点击任何一个链接时，它应该说“你好链接1”（如果点击链接1），“你好链接2”（当链接2）被点击。 Link1 内容（html）在 link1.html 和 link2 内容在 link2.html 文件中。 每当单击任何一个链接时，它都应将链接的 html 页面的名称作为参数传递。 这是我所做的：

<head>
<title>Ajax Practice</title>
<script type="text/javascript" src="scripts/jquery.js"></script> 
<script type="text/javascript">                                         
   $(document).ready(function(){
    $("a").click(function test(filename){
         alert(filename);
         var b = $("a").attr("title");
         alert(b);
         //$('#menuContents').load($(filename)).fadeIn("slow");
         //$('#menuContents').load('link1.html').fadeIn("slow");
         $('#menuContents').load(b).fadeIn("slow");
    });
   });
</script>
</head>

<body>
<div id="page-wrap">
    <div id="menu">
        <a href="javascript:test('link1.html');" title="link1.html">link1</a>
        <a href="#" title="">link2</a>      
    </div>
    <div id="menuContents">
        <h1>Hello!</h1>
    </div>
</div>

</body>
</html>

问题是如果我只是将 html 文件的名称作为参数传递，它不会被读取为字符串值，而是被读取为 object。 代码中的第一个警报将给出 [object Object] 消息。 我可以通过 using.attr 属性从链接标题中读取文本，并且可以使用.load 属性加载页面。 我也可以通过在.load属性中直接赋予html页面名称来更改页面的内容（代码中注释掉）。

谁能告诉我如何将 html 页面的名称作为参数而不是硬编码或阅读标题？

谢谢你。

Answer 1

只需删除 ready() 和 click() function，单独留下测试 function

function test(filename){
     alert(filename);
     //$('#menuContents').load($(filename)).fadeIn("slow");
     //$('#menuContents').load('link1.html').fadeIn("slow");
     $('#menuContents').load(filename).fadeIn("slow");
}

附言。 in fact when you define a function in jquery click function, the function can not be called outside, you need to define the test function in gloal, then you can call it in anywhere include a.href

下面有一个很好的方法来做到这一点

    <html>
    <head>
    <title>Ajax Practice</title>
    <script type="text/javascript" src="scripts/jquery.js"></script> 
    <script type="text/javascript">                                         
       $(document).ready(function(){
        $("a").click(function (e){
             $('#menuContents').load($(this).attr('href')).fadeIn("slow");
             e.preventDefault();
             return false;
        });
       });
    </script>
    </head>

    <body>
    <div id="page-wrap">
        <div id="menu">
            <a href="link1.html">link1</a>
            <a href="link2.html">link2</a>      
        </div>
        <div id="menuContents">
            <h1>Hello!</h1>
        </div>
    </div>

    </body>
    </html>

Answer 2

如果您正在使用诸如 PHP 之类的服务器端脚本，您可能需要查看 jQuery 的 $.ajax()

Answer 3

 $("a").click(function test(filename){

文件名实际上是事件 object。 请查看http://api.jquery.com/click/

此外，在您的代码中：

    <a href="javascript:test('link1.html');" title="link1.html">link1</a>

将调用 function 测试，因此您可以在 javascript 代码中定义此 function

function test(filename){
    alert(filename)
    // your code here

}

试试这里的例子http://jsfiddle.net/WUBsq/

您可以使用许多更清洁的方法，例如：

<a class="refresh" data-title="link1.html">click here</a>

...

$(document).ready(function(){
    $('a.refresh').click(function(){
        var title = $(this).attr('data-title');
        alert(title);

        // your code here
    })
})

在这里试试： http://jsfiddle.net/WUBsq/3/

在 jquery 中加载作为参数传递的 html 文件？

问题描述

3 个解决方案

解决方案1
2 2011-06-29 02:23:01

解决方案2
2 2011-06-29 02:26:26

解决方案3
1 2011-06-29 02:21:53

在 jquery 中加载作为参数传递的 html 文件？

问题描述

3 个解决方案

解决方案1 2 2011-06-29 02:23:01

解决方案2 2 2011-06-29 02:26:26

解决方案3 1 2011-06-29 02:21:53

解决方案1
2 2011-06-29 02:23:01

解决方案2
2 2011-06-29 02:26:26

解决方案3
1 2011-06-29 02:21:53