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

【问题标题】：How to pass HTML attribute value as parameter如何将 HTML 属性值作为参数传递
【发布时间】：2017-03-27 19:44:04
【问题描述】：

我有以下 Javascript 函数

function CallOfferRenderAction(productCode, providerCode)
{

}

我正在尝试在点击时发送属性值，但出现错误：

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

我做错了什么？

【问题讨论】：

提供几个html内容，你在哪里设置你在html中使用的offercode和providercode。
offercode 变量不在正在执行的 JS 的范围内。如果您打算将其包含为字符串，那么您会看到 attr() is not a function 因为这是一个 jQuery 方法，而 this 是一个原生元素
我认为你只需要用单引号将 offercode 和 providercode 括起来。
我只是将“this”传递给你的函数，然后从那里找出属性。
@DavidP 试过了，然后我得到了Uncaught TypeError: this.attr is not a function at HTMLInputElement.onclick 错误

标签： jquery html parameters attributes

【解决方案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">

【讨论】：

很好的解释。将使用数据属性！ +1
没问题，很乐意提供帮助。