鍍金池/ 問答/HTML/ js 變量取反問題

js 變量取反問題

window.onload=function(){

  var flag = true;
  var img1 = document.getElementById("img1");
  var img2 = document.getElementById("img2");
    document.getElementById("sel").addEventListener('touchstart',function(){
        if(flag){
            img1.style.display='inline-block';
            img2.style.display='none';
            flag = false;  // 為什么不能   !flag 這樣寫
        }else{  
            img1.style.display='none';
            img2.style.display='inline-block';
            flag = true;   // 為什么不能   !flag 這樣寫
        }
    })

}

=======
怎么把這段代碼寫到最精簡呢

回答
編輯回答
擱淺

!flag是取反，不是置反

flag=!flag;可以
2018年2月15日 04:57
編輯回答
陌南塵

這段代碼的意圖是toggle顯示狀態(tài)，可以寫成!flag。原代碼之所以沒有這么寫，我猜是因?yàn)閮蓚€img的display屬性必須分開寫，因此就都這么寫了

至于精簡，這段代碼的水分不算太大，如果換成我可能會寫成這樣

flag = !flag
var hide = 'none';
var show = 'inline-block';
img1.style.display = flag ? hide : show;
img2.style.display = flag ? show : hide;

或者犧牲一點(diǎn)可讀性，去掉三元表達(dá)式

flag = !flag
var hide = 'none';
var show = 'inline-block';
var arr = [show, hide]

img1.style.display = arr[+flag]
img2.style.display = arr[+!flag]
2018年6月30日 02:09