使该jQuery函数更干燥/更高效的建议 [英] Suggestions to make this jQuery function more DRY / more efficient

问题描述

跟随上一篇文章这段代码可以正常工作，但是我意识到这就像在潮湿的日子里像太平洋地区一样干旱.

Following previous post the this code works and does the job but I am conscious this is about as DRY as the Pacific on a wet day.

对于能使它更有效的任何建议，我深表感谢.

I's be grateful for any suggestions that will make it more efficient.

$( "#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');
    }

});

推荐答案

使DRY更干燥的几点:

Several points to make it more DRY:

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)之类的东西.

1. Use only one var keyword, and separate the items with commas. Ex. var asdf = 1, sdfg = '', dfgh = true;
2. Use multiple selectors so you apply the .addClass action only once. See https://api.jquery.com/multiple-selector/
3. Find a way to get rid of this duplication, such as perhaps adding/using a class to select the right ancestor: .parent().parent().parent().parent().parent().parent()
4. Don't duplicate strings like 'cvl-hide' Instead make a variable. Many JavaScript minifiers won't touch strings, so you'll end up with this duplication making your overall file larger than it needs to be.
5. Make variables for duplicate selectors so jQuery doesn't have to do the same lookup twice. For stuff like $('#cvl_mb_services .content-switch') and even for stuff like $(this) which is duplicated.

这篇关于使该jQuery函数更干燥/更高效的建议的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！