带有选项框架和 wordpress 的 JQuery 复选框答案

【问题标题】：JQuery checkbox with options framework and wordpress带有选项框架和 wordpress 的 JQuery 复选框
【发布时间】：2013-11-04 17:07:48
【问题描述】：

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

谢谢

【问题讨论】：

标签： javascript jquery wordpress web options

【解决方案1】：

带有三元语句的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 工作中。

【讨论】：

上述所有工作都很好，我已经尝试过使用 prop，这似乎也有效。但是下拉菜单保持不变。似乎它可能是选项框架问题而不是 jquery。非常感谢您的详细解释。

【解决方案2】：

试试.is()

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

或.prop

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

【讨论】：

【解决方案3】：

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

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

【讨论】：