代码之家 › 专栏 › 技术社区 › curly_brackets

jquery:鼠标悬停在链接1、2和3之后-激活显示内容

jquery javascript

curly_brackets · 技术社区 · 15 年前

我正在做一个复活节彩蛋,在这个彩蛋被泄露之前,你必须按正确的顺序激活一些链接。

我不能让这个脚本工作。我想我写错了,但看不出是什么…

<script>
    $(document).ready(function() {
        $('#show').hide();
        var StepOfThree = 0;
        alert(StepOfThree);

        $('#linkone').mouseover(function() {
            StepOfThree = 1;
            alert(StepOfThree);
        });

        $('#linktwo').mouseover(function() {
            if (StepOfThree1 === 1) {
                StepOfThree = 2;
                alert(StepOfThree);
            } else {
                StepOfThree = 0;
                alert(StepOfThree);
            }
        });

        $('#linkthree').mouseover(function() {
            if (StepOfThree1 === 2) {
                $('#show').show();
                alert(StepOfThree);

            } else {
                StepOfThree = 0;
                alert(StepOfThree);
            }
        });
    });
</script>

    <a href="#" id="linkone">Link #1</a>
    <a href="#" id="linktwo">Link #2</a>
    <a href="#" id="linkthree">Link #3</a>

    <div id="show">This is hidden content</div>

链接2和链接3上的鼠标指针甚至都不提醒我。我做错了什么?

5 回复 | 直到 11 年前

Community CDub 8 年前

为什么要对javascript原语使用jquery?这真是大错特错!这似乎是一个 jQuery-itis (对Google缓存链接感到抱歉)-使用javascript相等运算符,不要将 StepOfThree 对于简单的数字比较:

if (StepOfThree === 1)
{
    // do stuff
}

我猜你和jquery同时学习javascript,对吧?

更新:

好吧,这就是为什么第二个和第三个处理程序不能像您期望的那样工作:当您像现在这样创建回调时,您正在创建一个闭包。 ~~实际上,这个“封印”了 三步进 进入 mouseover 处理程序,这样它们就不会看到更新的值。~~

试着这样做:

http://jsbin.com/ovocu/6

这样,你就关闭了一个对象(一个“引用”或“指针”,如果你熟悉C/C++ +Java),而不是数字本身的原始值。

Some good reading on Javascript closures .

更新2: 对于最简单的工作示例,下面是 Daniel 必须提供(来自以下评论): http://jsbin.com/iluse3

不需要绕过物体。对不起,这引起的混乱!

Cristian Sanchez 15 年前

为什么不使用内置操作符来检查等价性呢?这个 is 方法的目的是在jquery对象上测试选择器,而不是在常规对象或变量上测试等价性。

而不是:

if ($(StepOfThree).is(1))

用途:

if (StepOfThree === 1) {

Matt Brunell 15 年前

您已经重新声明了变量,覆盖了它的作用域。

    ...
    var StepOfThree = 0; 

    $('#linkone').mouseover(function() { 
        var StepOfThree = 1; 
    });
    ...

这里有两个变量,都叫做“stepfthree”。要修复,除去第一个声明以外的所有声明的“var”。

Capt Otis 15 年前

你需要移除你的 瓦尔斯

<script>
    $(document).ready(function() {
        $('#show').hide();
        var StepOfThree = 0;

        $('#linkone').mouseover(function() {
            StepOfThree = 1;
        });

        $('#linktwo').mouseover(function() {
            if (StepOfThree == 1) {
                StepOfThree = 2;
            } else {
                StepOfThree = 0;
            }
        });

        $('#linkthree').mouseover(function() {
            if (StepOfThree == 2 ) {
                $('#show').show();
            } else {
                StepOfThree = 0;
            }
        });
    });
</script>

你包括jquery,对吧?

electrichead 15 年前

发生的是您的stepOfthree变量不是全局变量-它在您的$(document).ready函数中。对外申报: 脚本打开标签 var stepofthree=0; $(文档).ready-stufactures