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);

使用AJAX加载文件并附加到

3 个答案: