JQuery - 显示/隐藏一组字段
问题描述:
我想显示或隐藏一些使用select值作为条件的字段。我不想再重复一遍,只是为了显示和隐藏字段。我想使用相同的循环代码来显示或隐藏。什么是最好的方法?JQuery - 显示/隐藏一组字段
hideFields = function() {
var fields = $(['#foo', '#bar', '#lorem', '#ipsum'])
showHide = function (action) {
if (action === 'show' || action === 'hide') {
action = action + '();';
fields.each(function (index, value) {
$(value).parent()
.parent()
.action(); // call show||hide here... not working...
});
}
};
if ($('#select').val() === 'something') {
showHide('hide');
}
else {
showHide('show');
}
};
hideFields();
谢谢。
答
您可以使用jQuery的切换()方法来显示和隐藏要素:
$(".fields").toggle();
这样的话,你就不必担心自己的状态,并有jQuery的弄清楚他们是否需要隐藏或不。
您也可以通过在一个布尔值的方法,这将只显示或只隐藏要素:
$(".fields").toggle(true); // Shows elements, equivalent to show()
$(".fields").toggle(false); // Hides elements, equivalent to hide()
如果你需要做一些额外的逻辑,你可以使用始终查询元素的CSS属性$().css()并决定从那里做些什么。
答
var hideFields = function() {
var $fields = $('#foo, #bar, #lorem, #ipsum');
$fields.toggle(!($('#select').val() === 'something'));
};
hideFields();
答
我认为这会奏效。确保你使用选项:selected来获得选择的值。
function hideFields() {
var fields = '#foo, #bar, #lorem, #ipsum';
if ($('#select option:selected').val() === 'something') {
$(fields).show();
} else {
$(fields).hide();
}
}
hideFields();