Javascript 为什么这是错误的？（将“this”与jQuery一起使用） 函数bigtosmalltriangle（）{ $（this）.sides（“div.break”）.removeClass（'triangle3'）.addClass（'triangle1'）； setTimeout（“smalltomediumtriangle（）”，400）； } 函数smalltomediumtriangle（）{ $（this）.sides（“div.break”）.removeClass（'triangle1'）.addClass（'triangle2'）； setTimeout（“mediumtobigtriangle（）”，400）； } 函数mediumtobigtriangle（）{ $（this）.sides（“div.break”）.removeClass（'triangle2'）.addClass（'triangle3'）； setTimeout（“bigtosmalltriangle（）”，400）； } $（函数（）{ $（“单击此处”）。单击( 函数（）{ /*在这里做很多事情*/bigtosmalltriangle（）； $（this.hide（）； } ); }); .triangle1{背景：#000；} .triangle2{背景：红色；} .triangle3{背景：白色；}

Hello Worldasdf

我试图让div.break在3种颜色之间滚动，但是当我点击span时，它没有效果。有人知道我该怎么做吗

谢谢。

问题在于“this”与您在bigtosmalltriangle、SmalloMediumTriangle和mediumtobigtriangle函数中单击的跨度无关。您需要将元素作为参数传入，或者通过闭包设置所有函数范围内的变量

参数传递： 关闭：

---

您希望使用特定的“this”调用函数。我问了一个类似的问题：

---

我认为，由于闭包（参见Matthew Crumley的回答），回调函数本身不需要修改，因为setTimeout保留了“作用域”。不过，我对Javascript的了解还不够，无法远程保证这一点。如果我错了，只需对回调函数执行

.call（this）

技巧。

这是一种非常混乱的方法-strager的答案是更好的响应。回调函数需要修改，因为当setTimeout调用它们时，“this”将引用全局范围（即窗口）。我不认为使用“this”而不是将元素作为参数传递有什么好处。

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

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

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