Javascript范围问题：无法通过’this’obj更改元素传递给函数,但我可以使用longhand方法
作者：互联网
经修订的问题(见下文原文)：
下面是一个简单的ajax加载示例,其中加载内容中的元素具有事件绑定：
soTest.htm
<!DOCTYPE html>
<html>
<head>
<script language="JavaScript" type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script>
function changeBG(obj)
{
alert('Color 1: Should Turn Red');
jQuery(obj).css('background-color','red');
alert('Color 2: Should Turn Green');
jQuery('#' + jQuery(obj).attr('id')).css('background-color','green');
}
jQuery(document).ready(
function() {
jQuery('.loadedContent').load('soTest2.htm');
jQuery('body').delegate("#theElem","click",
function(){
var obj = this;
jQuery('.loadedContent').load('soTest2.htm',
function(){
changeBG(obj);
}
);
});
}
);
</script>
</head>
<body>
<div class="loadedContent">
</div>
</body>
</html>
Ajax加载的内容,soTest2.htm：
<div id="theElem" >
Hello
</div>
那么为什么这不起作用：
jQuery(obj).css('background-color','red');
但这样做：
jQuery('#' + jQuery(obj).attr('id')).css('background-color','red');
原始问题：
我有一个表,我想在点击特定的表标题时排序(那些类“排序”).
例如：
<a href="##" class="sort" sortby="LOCATION" direction="asc">Location</a>
要做到这一点,我有这个代码：
jQuery('body').delegate("click", ".sort", function(event) {
event.preventDefault();
jQuery('.searchResults').html('<div align="center" style="margin-top:35px;"><img src="/common/images/ajax-loader_big.gif" /></div>');
var TimeStamp = new Date().getTime();
var sortItem = this;
jQuery('.searchResults').load('modules/configSearchResultsOutput.cfm?' + TimeStamp + '&sortby=' + jQuery(this).attr('sortby') + '&direction=' + jQuery(this).attr('direction'), {
data: jQuery('#results').val()
}, function() {
sortCallback(sortItem);
});
});
因此,对于其中一个可排序列标题的click事件,我将整个“this”范围存储在var中以传递给此函数.
为了简化问题,我只是说我们试图根据我正在使用的自定义attr’方向来改变被点击元素的背景颜色：
function sortCallback(obj) {
//Returns correct attribute value
alert('In Callback: ' + jQuery(obj).attr('direction'));
//Does not return correct attribute value -- almost like it's cached or something
alert('Long hand reference: ' + jQuery('.sort[sortby="' + jQuery(obj).attr('sortby') + '"]').attr('direction'));
//Must reference value via (obj) to get correct updated value
if (jQuery(obj).attr('direction') == 'asc') {
//Changing a value within the element via this longhand approach works
jQuery('.sort[sortby="' + jQuery(obj).attr('sortby') + '"]').css('background-color', 'red');
//Changing a value within the element via this shorter approach does not work
jQuery(obj).css('background-color', 'red');
}
else {
//Works
jQuery('.sort[sortby="' + jQuery(obj).attr('sortby') + '"]').css('background-color', 'green');
//Doesn't work
jQuery(obj).css('background-color', 'green');
}
}
我假设我不理解javascript范围的某些方面(理解’这’对我来说是非常难以捉摸的).
问题总结：
如果我将var’d’this’范围传递给函数,为什么我不能改变’this’元素的方面,为什么我必须使用漫长的方法来改变它们呢？
对我来说是一个棘手的问题,希望我做得很好.
谢谢！
解决方法:
发生这种情况是因为您的ajax调用替换了DOM元素. obj指的是在调用.load之前在DOM中的DOM元素,但是被替换了.但是,确实存在具有相同ID的另一个元素！这就是你用’longhand’方法指的那个.
标签：javascript,scope,this,variables,scoping 来源： https://codeday.me/bug/20190710/1419737.html