使此 jQuery 函数更干/更高效的建议

Question

在之后，此代码可以正常工作，但我知道这与潮湿天气下的太平洋一样干燥。

如果有任何建议可以提高效率，我将不胜感激。

$( "#cvl_mb_services .content-switch" ).each(function(index, el) {
    var parent        = $(el).parent().parent().attr("id");
    var inputValue    = $('#' + parent + ' input[type=radio]:checked').val();
    var targetBox   = '#' + parent + ' .cvl-' + inputValue + '-fields';

    $(targetBox).removeClass('cvl-hide');
});


$('#cvl_mb_services .content-switch').on('click', 'input[type="radio"]', function(){

    var parent      = $(this).parent().parent().parent().parent().parent().parent().attr("id");
    var inputValue  = $(this).closest('input[type="radio"]').attr("value");
    var targetBox   = '#' + parent + ' .cvl-' + inputValue + '-fields';

    if (inputValue == 'content') {
        $('#' + parent + ' .cvl-content-fields').removeClass('cvl-hide');
        $('#' + parent + ' .cvl-header-fields').addClass('cvl-hide');
        $('#' + parent + ' .cvl-footer-fields').addClass('cvl-hide');
    } else if (inputValue == 'header') {
        $('#' + parent + ' .cvl-content-fields').addClass('cvl-hide');
        $('#' + parent + ' .cvl-header-fields').removeClass('cvl-hide');
        $('#' + parent + ' .cvl-footer-fields').addClass('cvl-hide');
    } else if (inputValue == 'footer') {
        $('#' + parent + ' .cvl-content-fields').addClass('cvl-hide');
        $('#' + parent + ' .cvl-header-fields').addClass('cvl-hide');
        $('#' + parent + ' .cvl-footer-fields').removeClass('cvl-hide');
    }

});

Answer 1

几点让它更干:

只使用一个 var 关键字，并用逗号分隔各项。前任。 var asdf = 1, sdfg = '', dfgh = true;
使用多个 select 或只应用一次 .addClass 操作。参见 https://api.jquery.com/multiple-selector/
想办法摆脱这种重复，比如也许 adding/using 一个 class 到 select 正确的祖先：.parent().parent().parent().parent().parent().parent()
不要复制像 'cvl-hide' 这样的字符串，而是创建一个变量。许多 JavaScript 压缩器不会触及字符串，因此您最终会得到这种重复，使您的整个文件比需要的更大。
为重复的 select 设置变量，这样 jQuery 就不必两次执行相同的查找。对于像 $('#cvl_mb_services .content-switch') 这样的东西，甚至对于像 $(this) 这样重复的东西。

使此 jQuery 函数更干/更高效的建议

Suggestions to make this jQuery function more DRY / more efficient

javascript

performance

jquery

dry