javascript - 带有选项框架和 wordpress 的 JQuery 复选框

Question

这是一个 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 不是很好，但我认为这应该可行，或者至少有更好的方法。

谢谢

Answer 1

试试.is()

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

或.prop

if (jQuery('#telephone_hidden').prop('checked')){

Answer 2

带有三元语句的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事件 for $('#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 工作中。

Answer 3

您可以将该is函数与checked选择器结合使用，如下所示：

if ($('#telephone_hidden').is(':checked')) {
   // ... do something
}