js 变量取反问题

Question

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 这样写
        }
    })

}

=======
怎么把这段代码写到最精简呢

Answer 1

这段代码的意图是toggle显示状态，可以写成!flag。原代码之所以没有这么写，我猜是因为两个img的display属性必须分开写，因此就都这么写了

至于精简，这段代码的水分不算太大，如果换成我可能会写成这样

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

或者牺牲一点可读性，去掉三元表达式

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

img1.style.display = arr[+flag]
img2.style.display = arr[+!flag]

Answer 2

!flag是取反，不是置反

flag=!flag;可以