如何将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引用了本机Element。

要解决此问题，您可以提供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">