Question

我正在尝试设置一个站点，所以当页面加载时，会有一个div从我设置的.html页面中动态提取它的内容。我在顶部有一堆缩略图，当你点击一个时，我想要一个不同的.html文档中的内容来替换第一次动态加载的div中的每个内容。

为此，我尝试使用jquery .load（）功能。我试图做的是建立一个功能：

<script type="text/javascript"> 
$(document).ready(function space_load() {

$('#SPACE_TOTAL').load('http://www.klossal.com/portfolio/space.html');
}
</script>

然后尝试使用以下方式启动它：

onclick="space_load();"

这不起作用，我想知道是否有人可以帮助我。我想知道的另一件事是，如果它能够工作，它会取代以前加载到那里的内容吗？我可能会得到一个自己的头脑，它只是自己做这件事。

Answer 1

首先，您的代码具有无效结构

$(document).ready(function() {    
    function space_load() {
        $('#SPACE_TOTAL').load('http://www.klossal.com/portfolio/space.html');
    }    
    space_load(); //Now call the function
});

但是，您可以将其修剪下来

$(function() {
    $('#SPACE_TOTAL').load('http://www.klossal.com/portfolio/space.html');
});

但是，因为你想点击一个元素。 这就是您所需要的：

$(function() {
    $("#yourlinkid").click(function() {
        $('#SPACE_TOTAL')
           .html('<img src="preloader.gif" />')
           .load('http://www.klossal.com/portfolio/space.html');
    });
});

Answer 2

你需要在这里记录吗？我认为你可以在点击发生时简单地调用该函数。

<script type="text/javascript"> 
 function space_load() {
  $('#SPACE_TOTAL').load('http://www.klossal.com/portfolio/space.html');
 }
</script>

然后......

onclick="space_load();"

假设#SPACE_TOTAL不是在运行时动态填充的容器，此时您需要包装document.ready。

Answer 3

首先，您不需要$(document).ready()，其次是您忘记关闭ready()方法。你的JS结束时遗漏了);。

jquery .load（）没有工作onclick

3 个答案: