Question

我有以下 Javascript 功能

function CallOfferRenderAction(productCode, providerCode)
{

}

我试图发送属性值onclick但是我收到错误：

未捕获的ReferenceError：未定义offercode 在HTMLInputElement.onclick

以下是我发送属性值的方式。

<input type="button" value="View" class="viewbtn" onclick="CallOfferRenderAction(this.attr(offercode), this.attr(providercode))" offercode="ATT-COMP-DTV-PRM-ALL-INCL_SEPARATOR_ATT-COMP-HSIA-PLS-A" providercode="ATTv6">

我做错了什么？

Answer 1

offercode变量不在正在执行的JS的范围内。如果您打算将其包含在字符串中以引用button元素上的属性，那么您会看到另一个错误：

attr（）不是函数

这是因为attr()是jQuery方法，而this是指本机元素。

要解决此问题，您可以向jQuery对象提供this：

function CallOfferRenderAction(productCode, providerCode) {
    console.log(productCode);
    console.log(providerCode);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="View" class="viewbtn" onclick="CallOfferRenderAction($(this).attr('offercode'), $(this).attr('providercode'))" offercode="ATT-COMP-DTV-PRM-ALL-INCL_SEPARATOR_ATT-COMP-HSIA-PLS-A" providercode="ATTv6">

然而，一个更好的解决方案完全是使用不引人注目的JS来附加事件。如果愿意，您可以使用jQuery来执行此操作。

另请注意，您添加的属性完全不标准，可能会导致无法预料的问题。将自己的元数据添加到元素时，最好使用data属性，因为这是他们的设计目标。试试这个：

$(function() {
  $('.viewbtn').click(function() {
    var $button = $(this);
    console.log($(this).data('offercode'));
    console.log($(this).data('providercode'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="View" class="viewbtn" data-offercode="ATT-COMP-DTV-PRM-ALL-INCL_SEPARATOR_ATT-COMP-HSIA-PLS-A" data-providercode="ATTv6">

如何将HTML属性值作为参数传递

1 个答案: