3

!variable一般的なJavascriptの知識（または実際には任意のプログラミング言語）は、それがブール値である（または条件付きでブール値に変換されるなど）場合、使用は反対の値に等しいことを教えてくれます。

私はこの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 を比較するときに、== の代わりに === を使用するように指示されているようなものです)?

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 に答える