Javascript范围问题:Can't通过'这'obj传递给了函数，但我可以使用longhan

Javascript scope question: Can't change element via 'this' obj passed to function, but I can using longhand approach

本文关键字：函数 longhan 我可以 可以使 obj 问题 范围 Can Javascript 通过      更新时间：2023-09-26

修订问题(原件见下文(：

下面是一个简单的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);
    });
});

因此，在其中一个可排序列标题的点击事件中，我将整个"this"范围存储在一个var中，以传递给该函数。

为了简化这个问题，我只想说，我们正试图根据我使用的自定义属性"方向"来更改单击元素的背景色：

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作用域的某些方面(理解"this"对我来说很难(。

问题总结：

如果我将一个var'd"this"范围传递给一个函数，为什么我不能更改"this"元素的方面，为什么我必须使用长方法来向下搜索以更改它们？

对我来说，这是一个棘手的问题，希望我做得足够好。

谢谢！

这是因为ajax调用替换了DOM元素。obj指的是在调用.load之前位于DOM中但已被替换的DOM元素。但是，确实存在另一个具有相同ID的元素！这就是你所说的"长手"方法。

我认为您的问题是因为加载调用是异步的，导致jQuery混淆。把你的代码放在load的回调中，它应该可以工作：

jQuery(document).ready(function() {
    jQuery('.loadedContent').load('soTest2.htm',
    function(resp, status, xhr){
        jQuery("#theElem").bind('click',
        function(){
            changeBG(this);
        });
    });
});
相关文章：