带有Ajax成功参数的调用函数？

Question

我有这种结构的XML文件：

<?xml version="1.0" encoding="utf-8" ?> 
<Photobank> 
<Landowner Name="Arnoldo"> 
    <Photo> 
    <Animal>Jaguar</Animal> 
    <Category>Cat</Category> 
    <Image>Charlie_20111120_010500.JPG</Image> 
    </Photo> 
    <Photo> 
    <Animal>Tapir</Animal> 
    <Category>Prey</Category> 
    <Image>Charlie_20111120_010500.JPG</Image> 
    </Photo> 
</Landowner> 
<Landowner Name="Charlie"> 
    <Photo> 
    <Animal>Margay</Animal> 
    <Category>Cat</Category> 
    <Image>Charlie_20111120_010500.JPG</Image> 
    </Photo> 
    <Photo> 
    <Animal>Tayra</Animal> 
    <Category>Prey</Category> 
    <Image>Charlie_20111120_010500.JPG</Image> 
    </Photo> 
</Landowner> 
</Photobank> 

而且我想为我的网页解析和格式化所有的照片在初始页面加载一个地主，然后清空div和填写它与按钮上的不同土地所有者的照片。到目前为止，我能够解析XML并在初始加载时获得适当的土地所有者的照片，但是我无法编写该函数，因此我也可以使用它来显示其他土地所有者的照片。

这里是jQuery的阿贾克斯：

$.ajax({ 
    type: "GET", 
    url: "xml/photobank.xml", 
    dataType: "xml", 
    success: xmlParser 
}); 


function xmlParser(xml) { 
    $('#photo_container').empty(); 
    console.log('1'); 
    $(xml).find('Landowner').each(function(){ 
     console.log('2'); 
     var landownerName = $(this).attr('Name'); 
     if (landownerName==="Charlie") { 
      $(this).find('Photo').each(function(){ 
       $("#photo_container").append('<div class="photo ' + $(this).find("Category").text().toLowerCase() + '"><p>' + $(this).find("Animal").text() + '</p>'+ '<img class="photobank" src="images/' + $(this).find("Image").text() + '" />' + '</div>'); 
      }) 
     } 
    }); 
} 

我想与函数用来作为参数变量来代替==="Charlie"在xmlParser，但每一次我尝试参数添加到函数声明中，初始Ajax负载停止工作。任何提示？

我在下面的开发页面上的代码尝试使用“Arnoldo”按钮来切换内容，但我不能太过分。如果这样做会更好，我也愿意使用不同的方法实现此目标（非Ajax，JSON？）。我只是希望其他人能够在未来添加照片信息。

活生生的例子： HTML：http://lamanai.org/catmap/index.html

JS：http://lamanai.org/catmap/js/cameramap.js

XML：http://lamanai.org/catmap/xml/photobank.xml

---

更新：下面ShankarSangoli帮助我形成的功能，我想的方式，但现在我的初始Ajax调用不起作用。我在控制台中获得Uncaught Error: Invalid XML: [object Document]。我想我在错误的时间调用Ajax（目前正处于文档准备就绪状态）。有任何想法吗？查看上面链接的实时页面。

Answer 1

您应该在使用之前使用$.parseXML解析xml。您可以有一个匿名成功处理程序，然后调用xmlParser传递xml数据和另一个参数。

$.ajax({ 
    type: "GET", 
    url: "xml/photobank.xml", 
    dataType: "xml", 
    success: function(xml){ 
     xmlParser(xml, "Arnoldo"); 
    } 
}); 

function xmlParser(xml, landOwner) { 

    xml = $.parseXML(xml); 

    $('#photo_container').empty(); 
    console.log('1'); 
    $(xml).find('Landowner').each(function(){ 
     console.log('2'); 
     var landownerName = $(this).attr('Name'); 
     if (landownerName === landOwner) { 
      $(this).find('Photo').each(function(){ 
       $("#photo_container").append('<div class="photo ' + $(this).find("Category").text().toLowerCase() + '"><p>' + $(this).find("Animal").text() + '</p>'+ '<img class="photobank" src="images/' + $(this).find("Image").text() + '" />' + '</div>'); 
      }) 
     } 
    }); 
} 

参考：http://api.jquery.com/jQuery.parseXML/