javascript - 用加载在所述div中的外部文件中的外部文件替换div内容

Question

我有一个文件，例如“file1.html”，通过 jQuery $('#info').load('info/file1.html'); 加载到一个 div 中从 file1 中更改 #info 的内容，使 file1.html 如下所示:

<a href="#" onclick="loadFile(this.value);" value="file2">File2</a>

在哪里

function loadFile(f) {
    $('#info').load('info/'+f+'.html');
}

但是，我在点击后只在 div 中得到一个空白页。如果文件夹设置破坏了它，我也尝试删除 'info/' 但没有。怎么了？

Answer 1

问题是 anchor 标记 dom 对象 (HTMLAnchorElement) 没有设置“值”属性。要获取 dom 对象表示的 anchor 标记的值属性，您可以执行 $(this).attr('value')(而不是 this.value ，这将是未定义的)。

但实际上，您应该使用 id/class 和 jquery 来附加您的事件，而不是使用 onclick 属性。你应该调用你的 anchor 属性 data-value，而不是 value，以符合自定义属性的 HTML5 规范。因此，更好的方法是:

HTML:

<a href="#" id="file-loader" data-value="file2">File2</a>

Javascript:

$('#file-loader').click(function(ev) {
    $('#info').load('info/' + $(this).attr('data-value') + '.html');
    ev.preventDefault();
});