我想根据单选按钮切换两个div的状态.基于我想要切换div的可见性的值.第一个div显示和隐藏基于this.value但第二种情况我正在使用!this.value它不起作用,我也试过了!布尔值(this.value).
$('[name="radio"]').change(function() {
console.log(this.value,!this.value);
$('#first').toggle(this.value); // this works
$('#second').toggle(!this.value); // this one not
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="radio" value="false" />
<input type="radio" name="radio" value="true" />
<div id="first">1</div>
<div id="second">2</div>
Why first one treat it as Boolean value and second not?
解决方法:
因为this.value是一个字符串’true’或’false’都是真值,所以否定它总是会给出错误.那是你的第二个条件永远不会成真
$('[name="radio"]').change(function() {
console.log(this.value, !this.value);
var value = this.value === 'true';
$('#first').toggle(value);
$('#second').toggle(!value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="radio" value="false" />
<input type="radio" name="radio" value="true" />
<div id="first">1</div>
<div id="second">2</div>
另请参阅toggle()方法
toggle: function( state ) {
if ( typeof state === "boolean" ) {
return state ? this.show() : this.hide();
}
return this.each(function() {
if ( isHidden( this ) ) {
jQuery( this ).show();
} else {
jQuery( this ).hide();
}
});
}
正如您所看到的,值不是boolean类型,那么它不被考虑,因为对于第一个传递字符串,它总是切换