带有选项框架和WordPress的JQuery复选框

JQuery checkbox with options framework and wordpress

本文关键字：JQuery 复选框 WordPress 选项 框架      更新时间：2023-09-26
这是一个

jquery问题，由于我正在使用管理面板中的WordPress和选项框架，因此我必须使用复选框隐藏某些选项。问题是其中一个元素是一个下拉菜单，似乎我无法在开始时隐藏它（这意味着如果我单击两次，下拉菜单就会消失），尽管代码适用于文本输入。这是代码：

jQuery('#telephone_hidden').click(function() {
    if (jQuery('#telephone_hidden').attr('checked') ? true : false) {
        jQuery('#section-telephone_dropdown_icons, #section-telephone_number_hidden').show();
    } else {
        jQuery('#section-telephone_dropdown_icons, #section-telephone_number_hidden').fadeToggle(400);
    }
});

我对jQuery不是很好，但我认为这应该可以工作，或者至少有更好的方法来做到这一点。

带有三元语句的 if 语句...不去工作。试试这个：

if (jQuery('#telephone_hidden').prop('checked')){
    jQuery('#section-telephone_dropdown_icons, #section-telephone_number_hidden').show();
} else {
    jQuery('#section-telephone_dropdown_icons, #section-telephone_number_hidden').fadeToggle(400);
}

.prop('checked')返回一个布尔值，我认为这是您想要验证的。此外，如果您正确设置库不冲突，则实际上不需要使用 jQuery。您可以将其合并为：

if ($('#telephone_hidden').prop('checked')){
    $('#section-telephone_dropdown_icons, #section-telephone_number_hidden').show();
} else {
    $('#section-telephone_dropdown_icons, #section-telephone_number_hidden').fadeToggle(400);
}

这看起来并不多，但在整个脚本文件中，您可以减小其大小，从而提高其性能。根据您的文件有多大，它可能会产生巨大的影响。

另外，请注意您正在使用 .click 事件进行$('#telephone_hidden')，因此不要再次查询 DOM，请尝试以下操作：

var $tel = $('#section-telephone_dropdown_icons, #section-telephone_number_hidden');
$('#telephone_hidden').on('click',function() {
    if ($(this).prop('checked')){
        $tel.show();
    } else {
        $tel.fadeToggle(400);
    }
});

使用 $(this) 可以防止再次查询 DOM 以获取选择器，并且我缓存用于 show/fadeToggle 的选择器，提供了另一个性能提升。

我知道这是一个很长的答案，但我想如果我展示逐步改进的过程，你可以学习并将其应用于未来的jQuery工作。

试试 .is（）

if (jQuery('#telephone_hidden').is(':checked')) {

或 .prop

if (jQuery('#telephone_hidden').prop('checked')){
您可以将

is 函数与checked选择器结合使用，如下所示：

if ($('#telephone_hidden').is(':checked')) {
   // ... do something
}
相关文章：