Question

我目前正在使用以下javascript来加载几个div中的项目：

<script>
    $.ajax({
        url: 'load.php?type=divA',
        cache: false,     
        success: function(data){
        $('#divA').html(data); 
        }
    });   
    $.ajax({
        url: 'load.php?type=divB',
        cache: false,     
        success: function(data){
        $('#divB').html(data); 
        }
    });  </script>

HTML：

<div id="divA">
<!-- Load divA item here -->
</div>
<div id="divB">
<!-- Load divB item here -->
</div>

我正在寻找（并且认为）有更好的方法来做到这一点。与此相似：div的1个函数，自动加载（乘）div的项：

function loadItem(<DIV ID>) {
 $.ajax({
            url: 'load.php?type=<DIV ID>',
            cache: false,     
            success: function(data){
            $('<DIV ID>').html(data); 
            }
        }); 
};

Answer 1

可以这样做：

function loadItem(divId) {
    $.ajax({
        url: 'load.php?type=' + divId,
        cache: false,
        success: function (data) {
            $('#' + divId).html(data);
        }
    });
};

Answer 2

我认为这更好：

function loadItem(div) {
   $.ajax({
      url: 'load.php?type='+div,
      cache: false,     
      success: function(data){
         $('#'+div).html(data); 
      }
   }); 
};

$(function(){
   $('div[id^="div"]').each(function(){
      loadItem(this.id);
   });
});

此代码正在做什么：

制作一个全局函数，将函数放在doc之外。
在doc ready块循环中，通过id以div开头的div并将该id传递给函数。
因此，如果有两个div，则会有两个ajax调用。

这是一个迟到的回复：

$('div[class*="div"]').each(function(){ // class contains div
   loadItem(this.className.split(' ')[1]); 
});// split by ' ' space and pass the second index as arrays are 0 based index.

用div中的ajax加载项目

2 个答案: