[英]return opposite Boolean value in one line
常见的Javascript知识(或任何编程语言)告诉我们使用!variable
将等于相反的值,当它是布尔值(或在条件转换为布尔值等)时。
$(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时我知道结果只能是一个数字)?
据我所知,您必须明确地重新分配原始的openBar
变量才能使其工作。 我有兴趣看到一个让你思考的例子。 我做了这个小修改并删除了回报:
newSize = (openBar = !openBar) ? 20 : 0;
http://jsfiddle.net/a9NPG/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 });
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.