Question

我正在尝试在javascript中创建一个按钮，当点击时将项目添加到购物篮

继承我的代码

var imgSrc = new Array ("images/hangings/1.jpg","images/hangings/2.jpg");
var prices = new Array (100,50);
var sizes = new Array ("450*350","100*50");

function load()
{
if(displayProductInfo==true)
{
    for (var i = 0; i < prices.length; i++)
    {
        $('#products ul').append('<li><img src="'+imgSrc[i]+'" width="525px" height="350px"/></li>');
        $('#products ul').append('<li>Price: £' + prices[i] +'</li>');
        $('#products ul').append('<li>Size: ' + sizes[i] +'</li>');
        $('#products ul').append('<button type="button" onclick="addToBasket(i)">Add To Basket</button>');
    }
}
}

function addToBasket(itemAdded)
{
    alert("clicked")
}

一切正常，除非点击一个按钮，它似乎没有运行addToBasket函数

怎么了？

Answer 1

这是因为你不能只调用addToBasket(i)，因为该函数范围内的i不存在。您应该将其更改为$('#products ul').append('<button type="button" onclick="addToBasket(' + i + ')">Add To Basket</button>');

Answer 2

您不需要new Array(...) - [...]就足够了。

不止一次地做$('#products ul')是不好的。你在一次迭代中做4次。将其存储在变量中并重复使用它：var list = $('#products ul');

以及它可能失败的原因 - 正如其他人写的那样 - 你没有传递i的值，而是在你点击按钮时尝试阅读i。

var imgSrc = ["images/hangings/1.jpg", "images/hangings/2.jpg"],
    prices = [100, 50],
    sizes = ["450*350", "100*50"];

function load() {
    if (displayProductInfo) {
        var list = $('#products ul');
        for (var i = 0; i < prices.length; i++) {
            list.append('<li><img src="' + imgSrc[i] + '" width="525px" height="350px"/></li>');
            list.append('<li>Price: £' + prices[i] + '</li>');
            list.append('<li>Size: ' + sizes[i] + '</li>');
            list.append('<li><button type="button" onclick="addToBasket(' + i + ')">Add To Basket</button></li>');
        }
    }
}

function addToBasket(itemAdded) {
    alert("clicked");
}

Answer 3

试试这个：

var imgSrc = new Array ("images/hangings/1.jpg","images/hangings/2.jpg");
var prices = new Array (100,50);
var sizes = new Array ("450*350","100*50");

function load()
{
if(displayProductInfo==true)
{
    for (var i = 0; i < prices.length; i++)
    {
        $('#products ul').append('<li><img src="'+imgSrc[i]+'" width="525px" height="350px"/></li>');
        $('#products ul').append('<li>Price: £' + prices[i] +'</li>');
        $('#products ul').append('<li>Size: ' + sizes[i] +'</li>');
        $('#products ul').append($('<button />', {'data-item': i}).text('Add To Basket').click(addToBasket));
    }
}
}

function addToBasket()
{
    alert("clicked on " + $(this).attr('data-item'));
}


var displayProductInfo = true;
load();

看看它有效here。

Javascript按钮不起作用

3 个答案: