javascript - 将对象作为参数传递给 onClick 函数

Question

我想将一个对象作为参数传递给 onclick 函数。然后我会将该参数调用到函数中并推送到空数组中。但是我尝试了所有方法，它只是推送 id、name 等。我想通过 laundryValue[i] onclick="getLaundryClick() 上的整个阵列作为参数。

    var laundryValue = [
        {id: 1, name: 'Sunglasses', price: 25},
        {id: 2, name: 'Jeans', price: 10},
        {id: 3, name: 'Shirts', price: 15},
        {id: 4, name: 'Cables', price: 20}
    ]
    
    var newLaundryValue = [];

    for (var i in laundryValue) {
        var wrap = laundryValue[i];
        document.getElementById('laundry-value').innerHTML += 
        '<li>' + 
            '<div class="laundry-name">' + laundryValue[i].name + '</div>' + 
            '<div class="laundry-price">' + laundryValue[i].price + '</div>' + 
            '<button class="laundry-btn" onclick="getLaundryClick(' + [wrap] + ')">' + 'Add' + '</button>' +  
        '</li>';
        
    }
    
    function getLaundryClick(wrap) {
        console.log(wrap)
    }

Answer 1

您可以使用 JSON.stringify将对象转换为字符串并使用 JSON.parse在 onclick 处理程序中将其转换回来。

'<button class="laundry-btn" onclick="getLaundryClick(JSON.parse(\'' 
   + JSON.stringify(wrap).replace(/'/g, '&apos;').replace(/"/g, '&quot;') + '\'))">' 
   + 'Add' + '</button>'