保存对此范围的访问权限
我的颜色存储在我的button的数据属性，我想用在切换。 但是，当我试图使用this访问数据信息时，没有数据可用。 我怎样才能保持我访问正确的范围？
我试图只切换给定的颜色为不包含跳过的元素。
HTML
<div> <input id="toggleButton" type="button" value="Toggle" data-color="Red" /> </div> <div id="toggleSet"> <div>Element</div> <div>Skip</div> <div>Element</div> </div>
CSS
.ActivateRed{ color: red; }
JS
$('#toggleButton').click(function(){ $("#toggleSet div").each(function(index,element){ if( element.innerHTML != "Skip" ){ $(element).toggleClass("Activate"+$(this).data("color")); //^this has no data to access? //Why am I getting undefined? } }); });
这是我的尝试jsFiddle 。 我不断得到Activateundefined作为类名。 为什么不能访问我的toggleButton数据？
问题的解释
这改变了
this MDN的值已更改，不再引用预期的元素或值。 通常这是因为范围已经改变，因此也有this参考。
这包含在执行上下文中
范围是指当前的执行上下文ECMA 。 为了理解this变化的原因，理解这些执行上下文在JavaScript中的运行方式非常重要。
执行上下文绑定这个
当控制进入执行上下文（代码在该范围内执行）时，variables的环境被设置（词法和可变环境 – 本质上，这设置了已经可访问的variables进入的区域，局部variables的区域存储），并发生这种绑定。
这个绑定被改变了执行上下文
这些上下文构成了一个逻辑堆栈。 结果是栈中更深的上下文可以访问以前的variables，但是它们的绑定可能已经被改变了。 每次jQuery调用一个callback函数，它都会使用apply MDN来改变这个绑定。
callback.apply( obj[ i ] )//where obj[i] is the current element
调用apply的结果是，在jQuerycallback函数内部， this指的是callback函数使用的当前元素。
例如，在.each ，通常使用的callback函数允许.each(function(index,element){/*scope*/}) 。 在这个范围内， this == element是真的。 这样做的结果是，如果您期望以前的this可用，它将被绑定到一个不同的元素。
this在jQuerycallback中的简短解释
如上所示，jQuerycallback函数使用apply函数将被调用的函数与当前元素进行绑定。 这个元素来自jQuery对象的元素数组。 构造的每个jQuery对象都包含一个元素数组，这些元素与用于实例化jQuery对象的select器jQuery API相匹配。
$(selector)调用jQuery函数（请记住$是对jQuery的引用，代码： window.jQuery = window.$ = jQuery; ）。 在内部，jQuery函数实例化一个函数对象。 所以，虽然它可能不是很明显，使用$()内部使用new jQuery() 。 这个jQuery对象的一部分构造是查找select器的所有匹配。 然后，jQuery对象包含与select器匹配的DOM元素的类似数组的结构。
当一个jQuery api函数被调用时，它将内部遍历这个类似数组的结构。 对于数组中的每一项，它都会调用api的callback函数，将callback的this绑定到当前元素。 这个调用可以在上面的代码片断中看到，其中obj是类似于数组的结构，而i是用于当前元素数组中位置的迭代器。
find一个解决scheme
可能很难确定发生了什么，因为jQuery往往默默地失败。 .data() jQuery API在这里仍然是一个有效的调用，它只是返回undefined 。 结果，上面的代码产生一个类名“Activate”+ undefined，“Activateundefined”。
这里认识到的重要部分是jQuery已经改变了this绑定。 为了使用以前的this绑定，该值必须存储在一个variables中。 存储这个名称的一个通用名称是， me self或最佳实践中对this代表的实际描述。
保存绑定工作的原因是，callback的执行上下文将在执行上下文堆栈中相对于绑定值的保存位置更深，从而有权访问该存储的值。
jsFiddle演示
$('#toggleButton').click(function(){ var toggleBtn = this; //^ store this into the toggleBtn variable $("#toggleSet div").each(function(index,element){ //^ binds `this` to the current element if( element.innerHTML != "Skip" ){ //^ we could have used `this.innerHTML` here $(element).toggleClass("Activate"+$(toggleBtn).data("color")); //^ re-use the stored `this` value } }); });
