让这个jQuery函数更DRY/更高效的建议

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

让它更干燥的几点：

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)这样的东西