Question

我认为这个错误一定非常愚蠢，但我已经尝试了三个多小时而且没有让它发挥作用。我有一些li元素，它的文本告诉我要加载什么文件：要加载的文件存储在与脚本相同的目录中。我希望在单击li时，内容分区将填充文件的内容，其名称与li的文本相同。这是我的代码，有人可以帮助我，请问，我做错了什么？

<ul class="sample_list">
    <li>AudioContext.txt</li>
    <li>AudioNode.txt</li>
    <li>AudioDestinationNode.txt</li>
    <li>AudioBuffer.txt</li>
</ul>

<div id="content"></div>


<script type="text/javascript">
    $(".sample_list li").click(function(){
        $("#content").load($(this).text());
    });
</script>

Answer 1

将您的侦听器包装在jQuery的文档就绪事件中。另外，提前声明文本变量。有时jQuery（this）在范围方面可能很棘手。如果你在#content元素的方法中调用jQuery（this），你就是在寻找那个元素，而不是你点击的li。

$(document).ready(function() {
    $(".sample_list li").click(function(){
        var text=$(this).text();
        $("#content").load(text);
    });
});

您可以在此处看到它：http://ffflabs.com/sandbox/loadli.html

Answer 2

将Ajax与dataType文本一起使用并加载

   $(document).ready(function() {
    $(".sample_list li").click(function() {
        $.ajax({
            url : $(this).text(),
            dataType: "text",
            success : function (data) {
                $("#content").html(data);
            }
        });
    });
});

jQuery: load txt file and insert into div

从li里面点击功能调用.load

2 个答案: