Почему это не так? (использование "this" с jQuery)

Question

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script type="text/javascript">

        function bigtosmalltriangle() {
            $(this).siblings("div.break").removeClass('triangle3').addClass('triangle1');
            setTimeout ( "smalltomediumtriangle()", 400 );
        }
        function smalltomediumtriangle() {
            $(this).siblings("div.break").removeClass('triangle1').addClass('triangle2');
            setTimeout ( "mediumtobigtriangle()", 400 );
        }
        function mediumtobigtriangle() {
            $(this).siblings("div.break").removeClass('triangle2').addClass('triangle3');
            setTimeout ( "bigtosmalltriangle()", 400 );
        }

    $(function() {
        $("span#clickhere").click(
            function() {
                /* do a lot stuff here */ bigtosmalltriangle();
                $(this).hide();
            }
        );
    });
</script>

<style type="text/css">
    .triangle1 {background:#000;}
    .triangle2 {background:red;}
    .triangle3 {background:white;}
</style>

<div><div class="break">Hello World</div><span id="clickhere">asdf</span></div>

Я пытаюсь заставить div.break прокручивать 3 bgcolors, но когда я нажимаю на промежуток, это никак не влияет. Кто-нибудь знает, что мне делать?

Спасибо.

Answer 1

Вы хотите вызывать ваши функции с определенным «этим». Я задал похожий вопрос: Вызов функции с «этим» .

$(function() {
        $("span#clickhere").click(
                function() {
                        /* do a lot stuff here */
                        bigtosmalltriangle.call(this);
                        $(this).hide();
                }
        );
});

Я думаю, что из-за замыканий (см. Ответ Мэтью Крамли) сами функции обратного вызова изменять не нужно, потому что setTimeout сохраняет «область видимости». Я не знаю Javascript достаточно, чтобы дистанционно гарантировать это, хотя. Если я не прав, просто выполните трюк .call(this) и для функций обратного вызова.

Answer 2

Проблема в том, что «this» не привязано к промежутку, на котором вы щелкнули в функциях bigtosmalltriangle, smalltomediumtriangle и mediumtobigtriangle. Вам нужно либо передать элемент в качестве параметра, либо установить переменную, которая находится в области видимости во всех функциях, через замыкания.

Передача параметра:

function bigtosmalltriangle(elements) {
    elements.removeClass('triangle3').addClass('triangle1');
    setTimeout(function() { smalltomediumtriangle(elements); }, 400);
}
function smalltomediumtriangle(elements) {
    elements.removeClass('triangle1').addClass('triangle2');
    setTimeout(function() { mediumtobigtriangle(elements); }, 400);
}
function mediumtobigtriangle(elements) {
    elements.removeClass('triangle2').addClass('triangle3');
    setTimeout(function() { bigtosmalltriangle(elements); }, 400);
}

$(function() {
    $("span#clickhere").click(
        function() {
            /* do a lot stuff here */
            bigtosmalltriangle($(this).siblings("div.break"));
            $(this).hide();
        }
    );
});

Затворы:

$(function() {
    $("span#clickhere").click(
        function() {
            var elements = $(this).siblings("div.break");

            function bigtosmalltriangle() {
                elements.removeClass('triangle3').addClass('triangle1');
                setTimeout(smalltomediumtriangle, 400);
            }
            function smalltomediumtriangle() {
                elements.removeClass('triangle1').addClass('triangle2');
                setTimeout(mediumtobigtriangle, 400);
            }
            function mediumtobigtriangle() {
                elements.removeClass('triangle2').addClass('triangle3');
                setTimeout(bigtosmalltriangle, 400);
            }

            /* do a lot stuff here */
            bigtosmalltriangle();
            $(this).hide();
        }
    );
});