2

我目前正在开发一个使用 jQuery、jQuery mobile 和大量 XML 的 PhoneGap 应用程序。这已经交给了我，因为开始研究这个的人已经不在了（但我不会去谈那个）。好的，概述... 我有一个从 XML 文件读取的页面，然后使用返回的数据来注入可用产品的图像和信息。当用户单击其中一个图像时，我希望显示一个对话框......这很简单，我只使用以下内容（对话框是我页面中的一个 div，而不是一个单独的文件）

$('#entry_level_phones img').live("click", function(){
    $.mobile.changePage("#popupEntry", { role: "dialog"});    
});

好的，我现在希望扩展它，以便在单击特定图像时读取相同的 XML 文件并检索有关所选产品的更多信息。此信息被格式化，作为 innerHTML 注入到对话框 div 中并显示......就像这样......

$('#entry_level_phones img').live("click", function(){
    // I know the ID of what was clicked using this.id!
    $.ajax({
        type : 'GET',
        url : 'hardware.xml',
        dataType : 'xml',
        success : getProduct(this.id)
    });
});

function getProduct(productID){

    productContent = "";
    // code to parse through XML and format using the passed productID to locate the relevent info 
    productContent = outFromParsingData;
    $("#popupEntry").html(productContent); 
    $.mobile.changePage("#popupEntry", { role: "dialog", "test":"test" });    
}

现在的问题是我需要将相关的 id (this.id) 传递给成功回调。通常，您只需声明函数名称，然后通过 ajax 调用返回的 xml（我仍然不明白如何以及为什么）。

success : getProduct // this is ajax call

getProduct(xml) // here's the returned xml passed as an argument

通过上面的修改，我可以读取返回的 XML，但我没有选择的 ID...所以最后我的问题...如何将 id 和 xml 传递给我的 getProduct 函数？非常感谢。

4

1 回答 1

0

每次单击图像时重新加载相同 XML 的方法对我来说效率很低。如果您已经加载了 XML 来创建图像和相关内容，那么使用数据属性将与每个图像相关联的相关信息存储在元素本身上，或者将 XML 数据存储在变量中，这不是更有意义吗？并在单击图像时查找带有 ID 的相关条目？

但是要回答您的问题，如果您在请求中定义处理程序，则可以使用闭包，并且在单击处理程序范围内声明的变量将在 AJAX 处理程序范围内可用：

$('#entry_level_phones img').live("click", function() {
    var $this = $(this);     
    $.ajax({
        type : 'GET',
        url : 'hardware.xml',
        dataType : 'xml',
        success : function(data) {
             // $this should be within scope here
             console.log($this);
        }
    });
}
于 2012-07-12T15:48:52.437 回答