Javascript 范围问题：无法通过“this”更改元素obj 传递给函数，但我可以使用普通方法

发布于 2024-11-06 17:15:49 字数 3981 浏览 4 评论 0原文

修改后的问题（原始问题见下文）：

这是一个简单的 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 中以传递给此函数。

为了简化问题，我只想说我们正在尝试根据我正在使用的自定义 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' 元素的各个方面，为什么我必须使用很长的方式向下钻取来更改它们？

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

谢谢！

原文

REVISED QUESTION (SEE BELOW FOR ORIGINAL):

Here is an example of a simple ajax load with an event binding on an element within the loaded content:

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 loaded content, soTest2.htm:

<div id="theElem" >
    Hello
</div>

So why is it that this doesn't work:

jQuery(obj).css('background-color','red');

But this does:

jQuery('#' + jQuery(obj).attr('id')).css('background-color','red');

++++++++++ORIGINAL QUESTION:++++++++++

I have a table that I want to sort when specific table headings are clicked (those with the class "sort").
For instance:

<a href="##" class="sort" sortby="LOCATION" direction="asc">Location</a>

To do that I have this code:

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);

    });
});

So on the click event for one of these sortable column headings I'm storing the entire 'this' scope in a var to pass through to this function.

To simplify the question I'll just say that we're trying to change the background color of the clicked element based on the custom attr 'direction' I'm using:

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');

    }



}

I'm assuming I'm not understanding some aspect of javascript scoping (understanding 'this' has been very elusive to me).

Question summarized:

If I'm passing a var'd 'this' scope to a function why can't I change the aspects of the 'this' element, why must I drill down using the long way to change them?

A tricky question for me to articulate, hopefully I did a good enough job.

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

迷迭香的记忆 2024-11-13 17:15:49

发生这种情况是因为您的 ajax 调用替换了 DOM 元素。 obj 引用在调用 .load 之前位于 DOM 中但已被替换的 DOM 元素。不过，另一个具有相同 ID 的元素确实存在！这就是您用“手写”方法所指的方法。

回复收藏 0 原文

柳絮泡泡 2024-11-13 17:15:49

我认为你的问题是因为加载调用是异步的，导致 jQuery 感到困惑。将您的代码放入 load 的回调中，它应该可以工作：

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

I think your problem is because that load call is asynchronous, causing jQuery to get confused. Put your code inside a callback for load and it should work:

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

回复收藏 0 原文

~没有更多了~