使用 AJAX 加载文件并附加到

Question

在这个测试页面上：

http://sapaacademy.net/working/jQueryAjaxExercises.html

1) 点击第一个按钮<a class="btn_quizTEST" data-exercisename="FL1E1.html">Start Exercise I </a>- 查看第一个加载的文件

2) 点击第二个按钮 <a class="btn_quizTEST" data-exercisename="FL1E2.html">Start Exercise II </a>- 查看第一个文件 覆盖 与第二个

3) 点击第三个按钮<a class="btn_quizTEST" data-exercisename="SL1E3.html">Start Exercise III </a>--查看所有之前加载的文件覆盖

我知道这是因为：

   $.ajax({
    // code...
 success:function(result){
      $('.exspace').html(result); <-- overrides all other loaded files
    }});

如何防止覆盖并将文件附加到相应的字段？

FL1E1.html 应该只加载到它对应的 div 中

FL1E2.html 应该加载到它对应的 div 中

SL1E3.html 应该加载到它对应的 div 中

任何建议将不胜感激

  <script> </script> is in the DOM

Answer 1

你不把html()改成append()吗？

var self = this;

$.ajax({
    // code...
   success:function(result){
       $(self).closest('.exBtnWrap').find('.exspace').append(result);
   }
});

Answer 2

像这样为每个 div 创建 id 和代码 ajax，

function loadFile(id){
$.ajax({
// code...
success:function(result){
  $('#'+id).html(result); <-- overrides all other loaded files
}});
}

<a class="btn_quizTEST" data-exercisename="FL1E1.html" id="file1"    
      onclick="loadFile(this.id)">Start Exercise I </a>

Answer 3

当我看到您的页面时，您有一个 setTimeout() 方法，该方法具有 jQuery 的 .slideDown() 方法，因此您可以在 .slideDown() 的回调函数中进行 ajax 调用：

var $this = $(this);

setTimeout(function () {
    $('.exspace').slideDown('fast', function(){
          $.ajax({
             // code...
          success:function(result){
                $this.closest('.exBtnWrap').find('.exspace').html(result);
          }});
    });
}, 500);