Javascript 将对象作为参数传递给onClick函数_Javascript

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

javascript

Javascript 将对象作为参数传递给onClick函数,javascript,Javascript,我想把一个对象作为参数传递给onclick函数。然后我将调用该参数到函数中，并将其推入空数组中。但我尝试了所有方法，只需推送id、名称等。我想将laundryValue[I]整个数组作为参数传递给onclick=“getLaundryClick（） var laundryValue=[ {id:1，名称：'太阳镜'，价格：25}， {id:2，名称：'牛仔裤'，价格：10}， {id:3，名称：'衬衫'，价格：15}， {id:4，名称：'Cables'，价格：20} ] var newLau

我想把一个对象作为参数传递给onclick函数。然后我将调用该参数到函数中，并将其推入空数组中。但我尝试了所有方法，只需推送id、名称等。我想将

laundryValue[I]

整个数组作为参数传递给

onclick=“getLaundryClick（）

var laundryValue=[
{id:1，名称：'太阳镜'，价格：25}，
{id:2，名称：'牛仔裤'，价格：10}，
{id:3，名称：'衬衫'，价格：15}，
{id:4，名称：'Cables'，价格：20}
]
var newLaundryValue=[]；
用于（洗衣价值中的var i）{
var wrap=洗衣价值[i]；
document.getElementById（'droyment-value'）。innerHTML+=
“”+
''+laundryValue[i].名称+''+
''+洗衣店价值[i].价格+''
“+”添加“+”
“”；
}
函数getLaundryClick（换行）{
console.log（wrap）
}

您可以通过以下方式创建一个类，以便从数组中动态创建按钮：您可以在此类中设置print方法以访问数组中任何元素的任何值。

var laundryValue=[
{id:1，名称：'太阳镜'，价格：25}，
{id:2，名称：'牛仔裤'，价格：10}，
{id:3，名称：'衬衫'，价格：15}，
{id:4，名称：'Cables'，价格：20}
];
类按钮按钮{
建造师（obj）{
this.obj=obj；
const button=document.createElement（'button'）；
button.onclick=this.print.bind（this）；
button.innerText=this.obj.name；
document.getElementById（'loody-value'）.appendChild（按钮）；
}
打印（）{
log（this.obj.name，this.obj.price）；
}
}
让按钮=[]；
for（设i=0；i


您可以使用JSON.stringify
将对象转换为字符串，并在onclick处理程序中使用JSON.parse
将其转换回字符串
'<button class="laundry-btn" onclick="getLaundryClick(JSON.parse(\'' 
   + JSON.stringify(wrap).replace(/'/g, '&apos;').replace(/"/g, '&quot;') + '\'))">' 
   + 'Add' + '</button>'

”案例1

var laundryValue=[
{id:1，名称：'太阳镜'，价格：25}，
{id:2，名称：'牛仔裤'，价格：10}，
{id:3，名称：'衬衫'，价格：15}，
{id:4，名称：'Cables'，价格：20}
]
var newLaundryValue=[]；
用于（洗衣价值中的var i）{
var wrap=洗衣价值[i]；
var data=JSON.parse（JSON.stringify（wrap））；
document.getElementById（'droyment-value'）。innerHTML+=
“”+
''+laundryValue[i].名称+''+
''+洗衣店价值[i].价格+''
'P.P>另一个选择是玩弄单引号和双引号<代码>配对> />代码，因此它不会冲突，因为我们通过这里引用的字符串，我们需要考虑它是如何以HTML形式呈现的：
工作简化版：

var laundryValue=[
{id:1，名称：'太阳镜'，价格：25}，
{id:2，名称：'牛仔裤'，价格：10}，
{id:3，名称：'衬衫'，价格：15}，
{id:4，名称：'Cables'，价格：20}
]
var newLaundryValue=[]；
用于（洗衣价值中的var i）{
var wrap=洗衣价值[i]；
wrap=JSON.stringify（wrap）
document.getElementById（'droyment-value'）。innerHTML+=
“”+
''+laundryValue[i].名称+''+
''+洗衣店价值[i].价格+''
“+”添加“+”
“”；
}
函数getLaundryClick（换行）{
console.log（wrap）
}
试试这个，我写了完整的代码。这里我只是使用laundaryValue数组进行循环，并将其存储在变量中，然后绑定到html上
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <div id="laundry-value"></div>

    <button onclick="getLaundryClick()">Get Laundary</button>

    <script type="text/javascript">

        let  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}
    ]
    let loopData = '';

    function getLaundryClick(){
        for (let i = 0; i < laundryValue.length; i++) {
            let addObj = JSON.stringify(laundryValue[i]);

            loopData += 
                `
            <ul>
                <li>ID: ${laundryValue[i].id}</li>
                <li>Name: ${laundryValue[i].name}</li>
                <li>Price: ${laundryValue[i].price}</li>
                <li><button onclick='addObjectFunction(${JSON.stringify(laundryValue[i])})'>Add</button></li>
            </ul>
            `;
        }

        document.getElementById('laundry-value').innerHTML = loopData;
    }

    function addObjectFunction(params){
        console.log(params)
    }

    </script>

</body>
</html>


洗衣店
让laundryValue=[
{id:1，名称：'太阳镜'，价格：25}，
{id:2，名称：'牛仔裤'，价格：10}，
{id:3，名称：'衬衫'，价格：15}，
{id:4，名称：'Cables'，价格：20}
]
让loopData=''；
函数getLaundryClick（）{
for（设i=0；i
ID:${laundryValue[i].ID}
名称：${laundryValue[i].Name}
价格：${laundryValue[i].Price}
加

`;
}
document.getElementById（'loopy-value'）。innerHTML=loopData；
}
函数addObjectFunction（参数）{
console.log（参数）
}
使用JSON.parse（）
的上述解决方案将起作用。但是，您可以用更少的努力实现同样的目标：

const laundryValue=[
{id:1，名称：'太阳镜'，价格：25}，
{id:2，名称：'牛仔裤'，价格：10}，
{id:3，名称：'衬衫'，价格：15}，
{id:4，名称：'Cables'，价格：20}]；
var newLaundryValue=[]；
document.getElementById（'droyment-value'）.innerHTML=laundryValue.map（（wrap，i）=>
`${wrap.name}
${wrap.price}
添加
`
).join（'\n'）；
document.onclick=function（ev）{let el=ev.target；//全局单击处理程序。。。
if（el.classList.contains（'droyment-btn'）{let itm=laundryValue[el.dataset.id]；
newLaundryValue.push（itm）
log（`added${itm.name}到购物车。`）
}else if（el.classList.contains（'cart'））
log（JSON.stringify（newLaundryValue））；
}
li div{显示：内联块；边距：4px 8px}

show cart
您应该传递一个Id作为引用对象的参数。该对象可能存储在localstore中，然后当您单击函数时，您可以使用Id搜索localstore来找到该对象。localstore是保存数据的全局位置。您的console.log返回[object object object]？@JoséNope如果你总是去，就说未捕获的语法错误：意外的标识符