Question

我目前正在开发一个使用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函数？非常感谢。

Answer 1

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

但是要回答你的问题，如果在请求中定义处理程序，你可以使用一个闭包，在你的click处理程序范围内声明的变量将在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);
        }
    });
}

使用jQuery进行XML解析时传递变量/参数

1 个答案: