我想获得输入标记的id属性值。
<input type="text" id="heading1" class="alert-heading" value="aaa" />
为此,我写了这段代码。
var alertHeading = $(".alert-heading");
alertHeading.on('blur', function(){
var headingId = $(this).attr("id");
console.log(headingId); // outputs 2943. I'm expecting "heading1".
});
但是,当我获得id的访问权限时,我得到一个奇怪的数字,虽然我期望得到一个“heading1”。
这是我现在正在处理的代码。
var alertHeading = $(".alert-heading");
alertHeading.on('blur', function(){
var key = alertMode.val();
chrome.runtime.getBackgroundPage(function(backgroundPage) {
var background = backgroundPage.background;
var alertObject = background.getStorage(key);
//(EDITED)Oh I think $(this)here no longer points to the input element!!
var headingId = $(this).attr("id");
console.log(headingId); // outputs 2943. I'm expecting "heading1".
});
})
请帮我解决这个问题。 提前谢谢!
答案 0 :(得分:3)
在ECMAScript术语中解释这一点,每次创建新enters a function控件Execution Context。每个执行上下文都有自己的thisBinding
,因此您需要存储对外部上下文的this
引用的引用,以便您可以通过lexical scope访问它。
alertHeading.on('blur', function(){
//[...]
var el = this; //copy the `this` reference to a variable
chrome.runtime.getBackgroundPage(function(backgroundPage) {
// [...]
var headingId = el.id; //access outer scope's this
});
});
我正在使用el.id
访问id
引用的DOM元素的el
属性。最好随时使用DOM而不是HTML attr
ibutes。
词法范围技巧是最常用的方法,但有几种方法可以解决这个问题。
在ES5中,还可以.bind()
函数对象的this
引用:
alertHeading.on('blur', function(){
chrome.runtime.getBackgroundPage(function(backgroundPage) {
// [...]
var headingId = this.id; //2. Now it has the same this as outer scope
}.bind(this)); //1. The onblur's `this` is bound to the bgpage callback
});
答案 1 :(得分:2)
您需要将this
保存在闭包变量中:
alertHeading.on('blur', function(){
var key = alertMode.val();
var that = this;
chrome.runtime.getBackgroundPage(function(backgroundPage) {
var background = backgroundPage.background;
var alertObject = background.getStorage(key);
var headingId = that.id;
console.log(headingId);
});
});