Javascript 多参数的onclick问题

Question

我试图在 'onclick' 中传递多个参数，但它不起作用，JS 让我很头疼。

单击 'div' 并转到 agregarADetalleMenu 时出现此错误：

SyntaxError: missing ) after argument list

function LlenarTableMenu(data) {
  $('#cards-productos').empty();

  $.each(data, function(i, val) {

    var block2 = '<div class="col-4 col-md-6" onclick="agregarADetalleMenu(' + val.id + ', ' + val.name + ', ' + val.price + ')">' +
      '<figure class="card card-product"> ' +
      '<div class="img-wrap">' +
      ' <img src="' + val.imagen + '">' +
      @* '<center><a class="btn-overlay" href="#"><i class="fa fa-plus-circle"></i> AGREGAR </a></center>' + *@ '</div>' +
      '<figcaption class="info-wrap">' +
      '<a href="#" class="title">' + val.name + '</a>' +
      '<div class="action-wrap"> ' +
      '<div class="price-wrap h5">' +
      @* '<span class="price-new">' + val.price.toFixed(2) + '</span>' + *@ '<span style="display: none;" class="catid">' + val.id + '</span>' +
      '</div>' +
      '</div>' +
      '</figcaption> ' +
      '</figure> ' +
      '</div>';

    $("#cards-productos").append(block2);
  });
}

Answer 1

传递给函数的值周围缺少引号。因为您已经在字符串中使用了单引号和双引号，所以您可以使用转义单引号（或双引号），如下所示：

onclick="agregarADetalleMenu(\'' + val.id + '\', \'' + val.name + '\', \'' + val.price + '\')"

Answer 2

你是这个意思吗？

请注意，我将函数值括在引号中 - 您嵌套了引号

function LlenarTableMenu(data) {
  $('#cards-productos').html(

  data.map(val => `<div class="col-4 col-md-6" onclick="agregarADetalleMenu('${val.id}','${val.name}',${val.price})">
      <figure class="card card-product">
        <div class="img-wrap">
          <img src="${val.imagen}">
          <center><a class="btn-overlay" href="#"><i class="fa fa-plus-circle"></i> AGREGAR </a></center>
        </div>
        <figcaption class="info-wrap">
          <a href="#" class="title">${val.name}</a>
          <div class="action-wrap">
            <div class="price-wrap h5">
              <span class="price-new">${val.price.toFixed(2)}</span>
              <span style="display: none;" class="catid">${val.id}</span>
            </div>
          </div>
        </figcaption>
      </figure>
    </div>`).join("")
  );
}

这个更好

function LlenarTableMenu(data) {
  $('#cards-productos').html(

  data.map(val => `<div class="agregar col-4 col-md-6"  data-id="${val.id}" data-name="${val.name}" data-price="${val.price}">
      <figure class="card card-product">
        <div class="img-wrap">
          <img src="${val.imagen}">
          <center><a class="btn-overlay" href="#"><i class="fa fa-plus-circle"></i> AGREGAR </a></center>
        </div>
        <figcaption class="info-wrap">
          <a href="#" class="title">${val.name}</a>
          <div class="action-wrap">
            <div class="price-wrap h5">
              <span class="price-new">${val.price.toFixed(2)}</span>
              <span style="display: none;" class="catid">${val.id}</span>
            </div>
          </div>
        </figcaption>
      </figure>
    </div>`).join("")
  );
}

然后

$('#cards-productos').on("click",".agregar",function() {
  agregarADetalleMenu(this.dataset.id,this.dataset.val,this.dataset.price)
})

Javascript 多参数的onclick问题

Javascript onclick problem with multiple parameters

html

javascript

razor

Javascript 多参数​​的onclick问题

Javascript onclick problem with multiple parameters

html

javascript

razor

Javascript 多参数的onclick问题