Question

我想将一个对象传递给onclick函数作为参数。然后，我将该参数调用到函数中并推入空数组。但我尝试了所有操作，只推送了ID，名称等。我想将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将对象转换为字符串，并在onclick处理程序中使用JSON.parse将其转换回。

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

Answer 2

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

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}
];
    
class ButtonToPress {
  constructor(obj) {
    this.obj = obj;

    const button = document.createElement('button');
    button.onclick = this.print.bind(this);
    button.innerText = this.obj.name;

    document.getElementById('laundry-value').appendChild(button);
  }

  print() {
    console.log(this.obj.name, this.obj.price);
  }
}


let buttons = [];
for (let i = 0; i < laundryValue.length; i++) {
  buttons[i] = new ButtonToPress(laundryValue[i]);
}

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

Answer 3

另一种选择是只使用单引号和双引号PAIR，因此在传递带引号的字符串时，它不会发生冲突，我们需要考虑如何以HTML形式呈现它：

工作简化版：

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];
        
        wrap =  JSON.stringify(wrap)
       
        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)
    }

<div id="laundry-value">

</div>

Answer 4

尝试一下，我编写了完整的代码。在这里，我只是使用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>

Answer 5

上述带有JSON.parse()的解决方案将起作用。但是，您可以轻松完成同一件事：

const 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 = [];

 document.getElementById('laundry-value').innerHTML = laundryValue.map((wrap,i)=>
        `<li><div class="laundry-name">${wrap.name}</div>
            <div class="laundry-price">${wrap.price}</div>
            <button class="laundry-btn" data-id="${i}">Add</button> 
         </li>`
 ).join('\n');
    
document.onclick=function(ev){ let el=ev.target; // global click handler ...
  if (el.classList.contains('laundry-btn')){let itm=laundryValue[el.dataset.id];
    newLaundryValue.push(itm)
    console.log(`added ${itm.name} to cart.`)
  } else if (el.classList.contains('cart'))
    console.log(JSON.stringify(newLaundryValue)); 
}

li div {display: inline-block; margin:4px 8px}

<div id="laundry-value"></div>
<hr><button class="cart">show cart</button>

Answer 6

案例1

 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];
        var data = JSON.parse(JSON.stringify(wrap));
        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(JSON.parse(\'' 
   + JSON.stringify(wrap).replace(/'/g, '&apos;').replace(/"/g, '&quot;') + '\'))">' 
   + 'Add' + '</button>' +  
        '</li>';
        
    }
    
    function getLaundryClick(wrap) {
        console.log(wrap);
    }

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

案例2

请参见工作示例。

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}
];
    
class ButtonToPress {
  constructor(obj) {
    this.object = obj;

    const button = document.createElement('button');
    button.onclick = this.print.bind(this);
    button.innerText = this.object.name;

    document.getElementById('laundry-value').appendChild(button);
  }

  print() {
    console.log(this.object);
  }
}


let buttons = [];
for (let i = 0; i < laundryValue.length; i++) {
  buttons[i] = new ButtonToPress(laundryValue[i]);
}

button{
margin: 0 5px;
background: #0095ff;
border:none;
padding: 5px 10px;
border-radius: 5px;
}

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

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

6 个答案: