3

常见的 Javascript 知识（或任何编程语言）告诉我们，!variable当它是布尔值（或在条件中转换为布尔值等）时， using 将等于相反的值。

我有这个 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 也为你们美化了它。

现在，到底为什么倒数第三行没有返回相反的值呢？我已成功使用以下内容：

return openBar = !openBar;

但由于某种原因，浏览器和 JSfiddle 和 JSHint 喜欢在我这样做时发疯，因为他们期望的是条件或值而不是赋值。但他们不会加载失败。我也知道我可以使用：

openBar = !openBar;
return openBar;

甚至

openBar = !openBar;
return;

但是我喜欢尽可能减少任何地方，并且真的只是想了解为什么这从根本上对我不起作用，以便我将来可以纠正它。

这是否与其他浏览器（使用 Chrome 30 和 Firefox 25）不兼容，或者可能会在我没有预料到的地方出错？

还是我可以忽略更多的不便/警告（例如当我知道结果只能是数字时，在比较 0 时告诉我使用 === 而不是 == 的那些东西）？

4

2 回答 2

3

据我所知，您必须明确地重新分配原始openBar变量才能使其正常工作。我有兴趣看到一个让你有不同想法的例子。我做了这个小修改并删除了返回：

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

http://jsfiddle.net/a9NPG/1/（虽然我读到你对它并不真正感兴趣。）

于 2013-11-10T08:40:09.563 回答
1

Array.reverse()是个不错的小家伙：

演示

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

});
于 2013-11-10T09:12:55.010 回答