在一行中返回相反的布爾值

Question

常見的Javascript知識（或任何編程語言）告訴我們使用!variable將等於相反的值，當它是布爾值（或在條件轉換為布爾值等）時。

我有這個Javascript：

$(document).ready(function () {    
    var addEvent = function (element, myEvent, fnc) {
        return ((element.attachEvent) ? element.attachEvent('on' + myEvent, fnc) : element.addEventListener(myEvent, fnc, false));
    };
    var openBar = false;
    addEvent(document.getElementById('toggle'), 'click', function (event) {
        var toggler = event.currentTarget,
            barWrap = document.getElementById('left-wrap'),
            newSize = (!openBar) ? 20 : 0;
        $(barWrap).animate({
            width: (newSize / 100 * window.innerWidth)
        }, {
            queue: false,
            duration: 300,
            step: function (now) {
                toggler.style.right = now + 'px';
                //barWrap.outerWidth = now;
                document.body.style.marginRight = now + 'px';
            },
            complete: function () {
                newSize = (newSize === 20) ? '20%' : '0%';
                document.body.style.marginRight = newSize;
                toggler.style.right = newSize;
                barWrap.style.width = newSize;
            }
        });
        return !openBar;
    });
});

...我投入了這個JSFiddle ......這將顯示它打開切換欄但不關閉它...有很多蓬松的HTML和CSS太適合你了。

現在，為什么3號到最后一行不會返回相反的值呢？ 我成功使用了以下內容：

return openBar = !openBar;

但由於某些原因，瀏覽器和JSfiddle以及JShint在我這樣做時會生氣，因為他們期望條件或值而不是賦值。 但他們不會加載。 我也知道我可以用：

openBar = !openBar;
return openBar;

甚至

openBar = !openBar;
return;

但是我喜歡盡量減少我能做的事情，並且真的只是想明白為什么這根本不能為我工作所以我可以在將來糾正它。

這是否與其他瀏覽器（使用Chrome 30和Firefox 25）不兼容，或者可能在某些我不期待的地方出錯？

或者更多的是我可以忽略的不便/警告（就像那些告訴我使用===而不是==當比較0時我知道結果只能是一個數字）？

Answer 1

據我所知，您必須明確地重新分配原始的openBar變量才能使其工作。 我有興趣看到一個讓你思考的例子。 我做了這個小修改並刪除了回報：

newSize = (openBar = !openBar) ? 20 : 0;

http://jsfiddle.net/a9NPG/1/ （雖然我讀到你對它並不感興趣。）

Answer 2

Array.reverse()是一個不錯的小家伙：

DEMO

$(function () {

    var $toggler = $('#toggle'),
        $barWrap = $('#left-wrap'),
        $doc     = $('body'),
        newSize  = ['0', '20'];

    $toggler.on('click', function(){
        var winW = window.innerWidth,
            perc = newSize.reverse()[0],
            px   = perc / 100 * winW; 
        console.log( px );
        $barWrap.animate({   width : px });
        $toggler.animate({   right : px });
        $('body').animate({ marginRight: px }); 
    }); 

});