JavaScript，如果条件不起作用？

Question

I am sitting like hours in front of the following code snippet and can not get it running like I want.

Basically this code creates a navigation menu on right click, but a click on the switcher should turn off this function and on the next click it gets turned on again.

Everything works fine (like expected), just the little if statement on line 12 ( if ( switcher % 2 == 0 ) ) does not work like expected, meaning the code within it always gets executed whether var switcher is even or not even. I also tried other conditions like "> 0" and so on but the code within it always gets executed.

$(document).ready(function () {
    /* Set switcher to zero */
    switcher = 0;
    /* If switch gets clicked increment var switcher*/
    $('#guidenavschalter').click(function () {
        switcher++;
        return false;
    });

    /* If var switcher is even execute following code, if not do nothing of this*/
    if (switcher % 2 == 0) {
        /* do not display right click browser menu */
        document.oncontextmenu = function () {
            return false;
        };
        /* if click within #page excluding area of #newid */
        $('#page:not(#newid)').mousedown(function (e) {
            /* if right click */
            if (e.button == 2) {
                /* if #newid already exist display it again */
                if ($('#newid').length) {
                    $('#newid').css({
                        "display": 'block'
                    });
                    $('#newid').css({
                        "top": e.pageY + 'px'
                    });
                    $('#newid').css({
                        "left": e.pageX + 'px'
                    });
                    /* if it does not exist create and display #newid */
                } else {
                    var $div = $('#block-bookoblock-book-outline').clone().attr('id', 'newid');
                    $('body').append($div);
                    $('#newid').css({
                        "top": e.pageY + 'px'
                    });
                    $('#newid').css({
                        "left": e.pageX + 'px'
                    });
                    $('#newid').css({
                        "position": 'absolute'
                    });
                    return false;
                }
            }
            /* if left click hide #newid */
            if (e.button == 0) {
                $('#newid').css({
                    "display": 'none'
                });
            }
            return true;
        });
    }
});

Answer 1

Your code basically is

switcher = 0;

... some irrelevant code here (the callback is not executed right now)

if ( switcher % 2 == 0 ) {

So no wonder the test always pass.

What you probably want is to put the if inside the callback, so that it's tested each time you click :

var switcher = 0;
$('#guidenavschalter').click(function(){
    switcher++;
    if ( switcher % 2 == 0 ) {
       ...
    }
    return false;
});

Answer 2

switcher = 0;  // created outside the click event handler

and you're increment the value inside click event handler. Therefore it is always zero.

You should go through Scoping in JavaScript

From comment, you're interested to know more about variable scope in Javascript then

check out this SO answer

Answer 3

I don't think it is the condition switcher % 2 == 0 that is problematic here. You have hooked events in case of true but is there an Else statement that unhooks those events so that the original functionality is resumed? ie Right click create default context menu.

Update:

In order to resume original functionality, call

document.oncontextmenu = null;

in else part.

Also, you need to define $('#page:not(#newid)').mousedown(function (e) { only once (outside of if/else ) and then use the switcher variable to determine whether to call the functionality or not.

In short, you need the following

$(document).ready(function () {
    /* Set switcher to zero */
    switcher = 0;
    /* If switch gets clicked increment var switcher*/
    $('#guidenavschalter').click(function () {
        switcher++;
        return false;
    });

    document.oncontextmenu = function() {
        if ( switcher % 2 == 0 ) {
            return false;
        } else {
            return true;
        }
    };
    /* if click within #page excluding area of #newid */
    $('#page:not(#newid)').mousedown(function (e) {
        if (switcher % 2 == 0) {
            // do stuff
        } else {
            // do nothing
        }
    });

});