[英]Have a better way to hide and show divs with radio checked?
我创建了这段代码几天,但我相信可以改进它,有人可以帮助我创建更智能的方式吗?
// Hide registered or customized field if not checked.
function checkUserType(value) {
if (value == 2) {
$('#registered').hide();
$('#customized').show();
} else if (value == 1) {
$('#registered').show();
$('#customized').hide();
}
}
checkUserType($('input:radio[name="jform[place_type]"]:checked').val());
$('#jform_place_type').on('click', function () {
checkUserType($('input:radio[name="jform[place_type]"]:checked').val());
});
// Hide registered or customized field if not checked.
function checkUserType(value) {
}
var t = function () {
var value = $('input:radio[name="jform[place_type]"]:checked').val();
if (value == 2) {
$('#registered').hide();
$('#customized').show();
} else if (value == 1) {
$('#registered').show();
$('#customized').hide();
}
};
$('#jform_place_type').on('click', t);
您可以通过存储 DOM 元素并缓存 rest 来改进 Jquery(用于性能)。 我猜这是你能达到的最大的东西。
function checkUserType(value) {
var r = $("#registered");
var c = $("#customized");
if (value == 2) {
r.hide();
c.show();
} else if (value == 1) {
r.show();
c.hide();
}
}
var func = function () {
checkUserType($('input:radio[name="jform[place_type]"]:checked').val());
};
$('#jform_place_type').on('click', func);
如需进一步阅读,请查看此JQuery 性能
特别是阅读文件的第三段
缓存 jQuery 对象
养成将 jQuery 对象保存到变量的习惯(很像我们上面的示例)。 例如,从不 (eeeehhhhver) 这样做:
$('#traffic_light input.on').bind('click', function(){...});
$('#traffic_light input.on').css('border', '3px dashed yellow');
$('#traffic_light input.on').css('background-color', 'orange');
$('#traffic_light input.on').fadeIn('slow');
相反,首先将 object 保存到局部变量,然后继续操作:
var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function(){...});
$active_light.css('border', '3px dashed yellow');
$active_light.css('background-color', 'orange');
$active_light.fadeIn('slow');
提示:由于我们要记住我们的局部变量是 jQuery 包装集,因此我们使用 $ 作为前缀。 请记住,切勿在您的应用程序中多次重复 jQuery 选择操作。
$('#jform_place_type').on('click', function () {
//show is true if the val() of your jquery selector equals 1
// false if it's not
var show= ($('input:radio[name="jform[place_type]"]:checked')
.val()==1);
//set both divs to visible invisible / show !show(=not show)
// (not show) means that if show=true then !show would be false
$('#registered').toggle(show);
$('#customized').toggle(!show);
});
如果您多次需要一个选择器然后缓存它我认为它被称为 object 缓存正如 Claudio 已经提到的那样,这就是为什么您会看到很多:
$this=$(this);
$myDivs=$("some selector");
保存 jquery function (jquery 对象)结果的变量的约定是它们以 $ 开头,但由于它只是一个变量名称,您可以随意调用它,以下也可以:
me=$(this);
myDivs=$("some selector");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.