javascript动态地将值传递给方法jquery

Question

$(document).bind('pageinit', function () {
    var vendor_id = $.urlParam('vendor_id');
    $.ajax({
        type: "GET",
        url: "http://testservice/testmenu",
        data: {
            vendor_id: vendor_id
        },
        error: function () {
            alert("Could not get the menu : " + url);
        },
        success: function parseXml(xml) {
            var jsonData = $.parseJSON(xml);
            $(jsonData).each(function (index, post) {
                $(post).each(function (index, row) {
                    var finalString = [];
                    for(var index = 0; index < row.menu.length; index++) {
                        finalString.push('<div id="collapsibleMenu" data-mini="true" data-role="collapsible" data-inset = "true" data-content-theme="g">');
                        finalString.push('<h3>' + row.menu[index].category_name + '</h3>');
                        finalString.push('<ul id="menuDetails" data-role="listview">');
                        for(var j = 0; j < row.menu[index].products.length; j++) {
                            var output = ['<li data-icon="addToCart" id="addToCart"> <a href="javascript:test("+row.menu[index].products[j].prod_id")"><p>' + row.vendor_menu[index].products[j].prod_name + '</p><p> $' + Number(row.vendor_menu[index].products[j].price).toFixed(2) + '</p></a>' + '</li>'];
                            finalString.push(output);
                        }
                        finalString.push('</ul></div>');
                    }
                    $('#output').append(finalString.join(''));
                });
            });
            $('#output').trigger('create');
        }
    });
});

function test(prod_id) {
    alert("entered test " + prod_id);
    addToCart(prod_id, 1);
}

在以下代码中，我正在执行以下操作：

<a href="javascript:test("+row.menu[index].products[j].prod_id")">

这显然给了我一个错误。关键是，我需要将 prod_id 动态传递给 javascript 测试方法。我不知道该怎么做。如果我只是调用 test 而不通过 prod_id，它会很好用。请帮忙！

Answer 1

尝试删除参数中的引号。

我想我可能已经想通了。 试试这个。

<a href="javascript:test(\''+row.menu[index].products[j].prod_id+'\')">

Answer 2

这看起来是使用模板引擎的完美理由。您可以使用这样的Jade 模板：

for post in posts
    for row in post
        for menu in row.menu
            #collapsibleMenu(data-mini="true", data-role="collapsible", data-inset="true", data-content-theme="g")
                h3= menu.category_name
                ul#menuDetails(data-role="listview")
                    for product in menu.products
                        li#addToCart(data-icon="addToCart")
                            a(href="#", data-product-id=product.prod_id)
                                p= product.prod_name
                                p= '$' + Number(product.price).toFixed(2)

然后您可以将您的$.ajax 调用简化为：

$.ajax({
    // ...
    dataType: 'json',
    success: function(data) {
        $('#output').append(templateFunction(data));
    }
});

对于点击事件，使用事件委托：

$('#output').on('click', 'a[data-product-id]', function() {
    addToCart(Number($(this).data('product-id')), 1);
});

简单，是吗？ 现在将您的所有ids 更改为类，因为ids 必须是唯一的，而您的不是！