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

Question

我有以下Javascript函数

function CallOfferRenderAction(productCode, providerCode)
{

}

我正在尝试发送属性的值onclick但我收到错误：

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

这是我发送属性值的方式。

<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指的是一个原生元素。

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

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">