jQuery: After mouseOver on link#1, 2 and 3 - activate show content

Question

Hi there

I'm working on a easter egg, where you have to activate some links in the correct order, before the secret is revealed.

I can't get this script to work. I guess I've wrote something wrong, but can't see what it is...

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

The mouseOver on the #linkTwo and #linkThree doesn't even give me an Alert.. What have I done wrong?

Answer 1

Why not use the built in operators to check equivalence? The is method is meant to test selectors on jQuery objects, not to test equivalence on regular objects or variables.

Instead of:

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

Use:

if (StepOfThree === 1) {

Answer 2

You need to remove your vars

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

You are including jquery right?

Answer 3

You have redeclared your variable, overwriting its scope.

    ...
    var StepOfThree = 0; 

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

There are two variables there, both named 'StepOfThree'. To fix, take away the 'var' for all but the first declaration.

Answer 4

What's happening is that your StepOfThree variable is not global - it is inside your $(document).ready function. Declare it outside: script open tag var StepOfThree=0; $(document).ready stuff