javascript - JQuery onclick数据属性 "undefined"

Question

使用 onclick="javascript()"语法时，我在从输入中提取数据属性时遇到问题。

这是我正在尝试的一个jsfiddle:

https://jsfiddle.net/123umaon/2/

<div>
  <input onclick="Test();" type="button" value="test" data-section="thisSection"/>
</div>

function Test(){
var test = $(this).data('section');
alert(test);
}

我希望能够通过 onclick 操作提取“data-section”的值。但在我的例子中，它总是返回未定义的。

Answer 1

您需要引用当前事件。在 Test() 函数上下文中，this 指的是窗口，而不是 DOM 元素。

$('#testOut').val("TEST TEST");

function Test(){
var test = $(event.currentTarget).data('section');
alert(test);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input onclick="Test();" type="button" value="test" data-section="thisSection"/>
</div>

注意:window.event我在这里使用的变量在新代码中不受欢迎。