Jquery: что означает "$ (this)" точно?

У меня есть программа, и она работает хорошо. См. ЗДЕСЬ.

Это код:

<div id="round"></div>

<style>
#round{
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
left: 400px;
top: 200px;
background-color: #e1e1e1;
}
</style>

<script src="jquery.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script>
$(document).ready(function(){
    $("#round").click(function(){
        setInterval(function(){
            $("#round").animate(
                {height: 250,
                width: 150,
                top:150,
                left: 425},
                {duration: 300}
                ).
            animate(
                {height: 200,
                width: 200,
                top:200,
                left: 400},
                {duration: 300}
            );
        }, 0);
    });
});
</script>

Но когда я меняю "#round" на "this". Это не сработает. Зачем? (на самом деле это работает, но когда я помещаю их в setInterval(), это не сработает)

$(document).ready(function(){
    $("#round").click(function(){
        setInterval(function(){
            $("#round").animate(
                {height: 250,
                width: 150,
                top:150,
                left: 425},
                {duration: 300}
                ).
            animate(
                {height: 200,
                width: 200,
                top:200,
                left: 400},
                {duration: 300}
            );
        }, 0);
    });
});

измените на "this", он не будет работать.

$(document).ready(function(){
    $("#round").click(function(){
        setInterval(function(){
            $(this).animate(
                {height: 250,
                width: 150,
                top:150,
                left: 425},
                {duration: 300}
                ).
            animate(
                {height: 200,
                width: 200,
                top:200,
                left: 400},
                {duration: 300}
            );
        }, 0);
    });
});

Ответы

Ответ 1

this является ссылкой на элемент, который вызывает текущую функцию...

то вы можете обернуть его в функцию jquery $(), чтобы выбрать его так же, как и другой селектор.

Итак, setInterval вызывает анонимную функцию, поэтому он не вызывается ссылочным элементом, поэтому по умолчанию используется объект window.

сохранить контекст this в переменной, а затем использовать его внутри, как это...

$(document).ready(function(){
    $("#round").click(function(){
        var clicked = this;   //<----store the click context outside setInterval
        setInterval(function(){
            $(clicked).animate(  //<----------use it here
                {height: 250,
                width: 150,
                top:150,
                left: 425},
                {duration: 300}
                ).
            animate(
                {height: 200,
                width: 200,
                top:200,
                left: 400},
                {duration: 300}
            );
        }, 0);
    });
});

Ответ 2

Внутри функции события привязки jQuery this относится к текущему элементу DOM из задействованной коллекции. Поскольку это элемент DOM, передача его в jQ, например, $( this ), делает его сборником jQuery, поэтому вы можете делать с ним больше jQuery.

Однако в вашем измененном коде non-workng вы переместили его в новую анонимную функцию. Внутри этой функции this теперь относится к новой области.

Перед вашей функцией вам нужно получить ссылку на this:

$(document).ready(function(){
    $("#round").click(function(){
        var jQuerizedElement = $( this );
        setInterval(function(){
            jQuerizedElement.animate(
                {height: 250,
                width: 150,
                top:150,
                left: 425},
                {duration: 300}
                ).
            animate(
                {height: 200,
                width: 200,
                top:200,
                left: 400},
                {duration: 300}
            );
        }, 0);
    });
});

Ответ 3

$(this) является контекстно-зависимым. Каждая функция [анонимный, в этом случае], которую вы вводите, изменяет значение $(this). Например:

$('#round').click(function(){
    alert($(this).attr('id')) // alerts round
    setInterval(function(){
        alert($(this).attr('id')) // alerts undefined
    });
});

Ответ 4

Поскольку вы используете функцию обратного вызова, которая запускается setInterval в другом контексте...

Вы можете справиться с этим, скопировав 'this' на другую переменную ex:

var that = this:

И при обратном вызове

$(that).animate...

Ответ 5

это в основном связано с контекстом. Когда вы скажете $(this), если это элемент dom, он предоставит вам объект jquery, связанный с этим элементом dom.

Ответ 6

Если я хорошо понимаю, кажется, что $(this) - это просто node, который был triggerd.

Например, если вы нажали событие на кнопке . В обратном вызове события вы можете использовать $(this), которые представляют node кнопки ...