时间戳

首页 > 解决方案 > 无法将输入元素传递给函数以获取数据属性

javascript - 无法将输入元素传递给函数以获取数据属性

问题描述

你能看看这个演示，让我知道为什么我不能将它传递给$("#sample")一个像下面这样的函数吗？

function GetAtts(elem) {
  var x = elem.data('x');
  var y = elem.data('y');

 console.log(x + ' ' + y); 
}


function GetAttsThis(elem) {
  var x = this.data('x');
  var y = this.data('y');

 console.log(x + ' ' + y); 
}

GetAtts('sample');
GetAtts('$("#sample")');
GetAttsThis('sample');

这是演示

function GetAtts(elem) {
  var x = elem.data('x');
  var y = elem.data('y');

  console.log(x + ' ' + y);
}


function GetAttsThis(elem) {
  var x = this.data('x');
  var y = this.data('y');

  console.log(x + ' ' + y);
}

GetAtts('sample');
GetAtts('$("#sample")');
GetAttsThis('sample');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="sample" type="text" data-x="5" data-y="20">

如您所见，我得到了

未捕获的类型错误：elem.data 不是函数

和

未捕获的 TypeError：this.data 不是函数

两种形式的函数

标签： javascriptjquery

解决方案

你必须像这样传递对象：

GetAtts($("#sample"));

this关键字不引用输入，因为您在没有特定上下文的情况下使用它。

您可以使用该.apply()方法设置this为$("#sample")函数的范围内，例如：

GetAttsThis.apply($("#sample"));


function GetAtts(elem) {
  var x = elem.data('limitn');
  var y = elem.data('limitp');

  console.log(x + ' ' + y);
}

function GetAttsThis() {
  var x = this.data('limitn');
  var y = this.data('limitp');

  console.log(x + ' ' + y);
}

GetAtts($("#sample"));
GetAttsThis.apply($("#sample"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="sample" type="text" data-limitn="5" data-limitp="20">

推荐阅读