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

Question

按照previous post，此代码可以正常工作，但我知道这在潮湿的日子里就像太平洋一样干燥。

我很感激任何可以提高效率的建议。

$( "#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

几个点让它更干：

1. 只使用一个var 关键字，并用逗号分隔各项。前任。 var asdf = 1, sdfg = '', dfgh = true;
2. 使用多个选择器，以便您只应用一次.addClass 操作。见https://api.jquery.com/multiple-selector/
3. 找到一种方法来消除这种重复，例如添加/使用一个类来选择正确的祖先：.parent().parent().parent().parent().parent().parent()
4. 不要重复像'cvl-hide' 这样的字符串，而是创建一个变量。许多 JavaScript 压缩器不会接触字符串，因此您最终会遇到这种重复，从而使您的整个文件变得比实际需要的大。
5. 为重复的选择器创建变量，这样 jQuery 就不必进行两次相同的查找。对于像 $('#cvl_mb_services .content-switch') 这样的东西，甚至对于像 $(this) 这样重复的东西。