Question

查看底层代码。

function displayProductsByCategory(a){
        $.getJSON('json/newjson.json', function(data) {
            $("#Product_Display_Div").empty();
            $("#Product_Display_Div").append('<h1>'+a.id+'</h1>');
             $.each(data[a.id], function(key, item) {
                 //alert("key :"+item.productPrice+"value :"+item.productName);
                 $("#Product_Display_Div").append('<ul class="columns"><li> <h3>'+item.productName
                         +'</h3><img src="'+item.ProductImageURL
                         +'" width="150" height="150" /><p> hello</p><p class="product_price">'+item.productPrice
                         +'</p><div class="info"><h2>Title</h2><p>some text</p><button onclick="doTask('+item.productName+','+item.ProductImageURL+','+item.productPrice+');"  class="addtocart" >Add to Cart</button></div></li></ul>');

            }) 
        });
    }

在这段代码中，最后一行剂量工作中的onclick属性可能是引号存在一些问题它给出的错误为：Uncaught SyntaxError：意外的数字

你可以帮帮我吗

javascript方法是：

function doTask(productName,productPrice,productImageURL)
{

alert("inside java script");

/*this.productName=productName;
this.productPrice=productPrice;
this.productImageURL=productImageURL;
var person=prompt("Please enter the quantity","1");
person=parseInt(person);
alert(person+2);
if (!isNaN( person ))
{
    alert("yes its a number");
}
else
{
    alert("enter the valid quantity.\nShould be a Number");
}*/
  }

Answer 1

据推测，productName和productImageURL应该是字符串。你的代码：

'<button onclick="doTask('+item.productName+','+item.ProductImageURL+','+item.productPrice+');"  class="addtocart" >'

会产生这样的东西：

<button onclick="doTask(Product Name,http://blahblah,123);"  class="addtocart" >

当你这样看时，你可以看到你的字符串没有被引用。由于你的字符串已经在双引号和单引号内，你需要转义它们。

<button onclick="doTask(\''+item.productName+'\',\''+item.ProductImageURL+'\',\''+item.productPrice+'\');"  class="addtocart" >

正如你所看到的，这很快变得丑陋。你应该考虑重构这个，所以它不是一个庞大的字符串。

此外，您的参数似乎无序。您的方法需要第三个URL，但是第二个传递它。

Answer 2

问题是您的字符串未被引号字符包围。如果你检查元素，你会看到它是这样的：

onclick="doTask(foobar,/your/url,123.45);"

但它看起来应该是这样的：

onclick="doTask('foobar','/your/url',123.45);"

您的代码需要像这样更改：

onclick="doTask(\''+item.productName+'\',\''+item.ProductImageURL+'\',\''+item.productPrice+'\');"

这是一个完全消除问题的重写：

function displayProductsByCategory(a){
    $.getJSON('json/newjson.json', function(data) {
        $("#Product_Display_Div").empty();
        $("#Product_Display_Div").append('<h1>'+a.id+'</h1>');
         $.each(data[a.id], function(key, item) {
             var button = $('<button></button>').addClass('addtocart').data('item',item).text('Add to Cart');
             //alert("key :"+item.productPrice+"value :"+item.productName);
             var ul = $('<ul class="columns"><li> <h3>'+item.productName
                     +'</h3><img src="'+item.ProductImageURL
                     +'" width="150" height="150" /><p> hello</p><p class="product_price">'+item.productPrice
                     +'</p><div class="info"><h2>Title</h2><p>some text</p></div></li></ul>');
             $(ul).find('div.info').append(button);
             $("#Product_Display_Div").append(ul);

        }) 
    });
}

$("#Product_Display_Div").on('click','button.addtocart',function() {
    console.log($(this).data('item')); // logs the item attached to the button. No need for parameters.

Answer 3

您的JavaScript是：NAME，PRICE，IMAGEURL

但你的JQuery是：NAME，IMAGEURL，PRICE

这是问题吗？

无法从javascript运行参数化方法

3 个答案: