问

DRY - 如何组合这些jQuery函数？

橙子小狸发布于 2023-02-06 15:35

function

原始问题:

我正在看这个我知道可以减少约90%的代码块.我只是想不出怎么做.

这是我所指的块:

$('table.model a').click(function(){
var divForm = [$('div.form')];
$(this).closest('div').not('.close').fadeOut(500).animate({"top": "-414px"}, 100).fadeIn('fast');
    if ($(this).hasClass('tmi48')) {
        $('img.i4').show();
        $('h1.tmi48').show();
    } else if ($(this).hasClass('tmi416')) {
        $('img.i4').show();
        $('h1.tmi416').show();
    } else if ($(this).hasClass('tmi432')) {
        $('img.i4').show();
        $('h1.tmi432').show();
    } else if ($(this).hasClass('tmi464')) {
        $('img.i4').show();
        $('h1.tmi464').show();
    } else if ($(this).hasClass('tmi4s16')) {
        $('img.i4s').show();
        $('h1.tmi4s16').show();
    } else if ($(this).hasClass('tmi4s32')) {
        $('img.i4s').show();
        $('h1.tmi4s32').show();
    } else if ($(this).hasClass('tmi4s64')) {
        $('img.i4s').show();
        $('h1.tmi4s64').show();
    } else if ($(this).hasClass('tmi516')) {
        $('img.i5').show();
        $('h1.tmi516').show();
    } else if ($(this).hasClass('tmi532')) {
        $('img.i5').show();
        $('h1.tmi532').show();
    } else if ($(this).hasClass('tmi564')) {
        $('img.i5').show();
        $('h1.tmi564').show();
    } else if ($(this).hasClass('tmi5c16')) {
        $('img.i5c').show();
        $('h1.tmi5c16').show();
    } else if ($(this).hasClass('tmi5c32')) {
        $('img.i5c').show();
        $('h1.tmi5c32').show();
    } else if ($(this).hasClass('tmi5c64')) {
        $('img.i5c').show();
        $('h1.tmi5c64').show();
    } else if ($(this).hasClass('tmi5s16')) {
        $('img.i5s').show();
        $('h1.tmi5s16').show();
    } else if ($(this).hasClass('tmi5s32')) {
        $('img.i5s').show();
        $('h1.tmi5s32').show();
    } else if ($(this).hasClass('tmi5s64')) {
        $('img.i5s').show();
        $('h1.tmi5s64').show();
    } else if ($(this).hasClass('atti48')) {
        $('img.i4').show();
        $('h1.atti48').show();
    } else if ($(this).hasClass('atti416')) {
        $('img.i4').show();
        $('h1.atti416').show();
    } else if ($(this).hasClass('atti432')) {
        $('img.i4').show();
        $('h1.atti432').show();
    } else if ($(this).hasClass('atti464')) {
        $('img.i4').show();
        $('h1.atti464').show();
    } else if ($(this).hasClass('atti4s16')) {
        $('img.i4s').show();
        $('h1.atti4s16').show();
    } else if ($(this).hasClass('atti4s32')) {
        $('img.i4s').show();
        $('h1.atti4s32').show();
    } else if ($(this).hasClass('atti4s64')) {
        $('img.i4s').show();
        $('h1.atti4s64').show();
    } else if ($(this).hasClass('atti516')) {
        $('img.i5').show();
        $('h1.atti516').show();
    } else if ($(this).hasClass('atti532')) {
        $('img.i5').show();
        $('h1.atti532').show();
    } else if ($(this).hasClass('atti564')) {
        $('img.i5').show();
        $('h1.atti564').show();
    } else if ($(this).hasClass('atti5c16')) {
        $('img.i5c').show();
        $('h1.atti5c16').show();
    } else if ($(this).hasClass('atti5c32')) {
        $('img.i5c').show();
        $('h1.atti5c32').show();
    } else if ($(this).hasClass('atti5c64')) {
        $('img.i5c').show();
        $('h1.atti5c64').show();
    } else if ($(this).hasClass('atti5s16')) {
        $('img.i5s').show();
        $('h1.atti5s16').show();
    } else if ($(this).hasClass('atti5s32')) {
        $('img.i5s').show();
        $('h1.atti5s32').show();
    } else if ($(this).hasClass('atti5s64')) {
        $('img.i5s').show();
        $('h1.atti5s64').show();
    } else if ($(this).hasClass('vzi48')) {
        $('img.i4').show();
        $('h1.vzi48').show();
    } else if ($(this).hasClass('vzi416')) {
        $('img.i4').show();
        $('h1.vzi416').show();
    } else if ($(this).hasClass('vzi432')) {
        $('img.i4').show();
        $('h1.vzi432').show();
    } else if ($(this).hasClass('vzi464')) {
        $('img.i4').show();
        $('h1.vzi464').show();
    } else if ($(this).hasClass('vzi4s16')) {
        $('img.i4s').show();
        $('h1.vzi4s16').show();
    } else if ($(this).hasClass('vzi4s32')) {
        $('img.i4s').show();
        $('h1.vzi4s32').show();
    } else if ($(this).hasClass('vzi4s64')) {
        $('img.i4s').show();
        $('h1.vzi4s64').show();
    } else if ($(this).hasClass('vzi516')) {
        $('img.i5').show();
        $('h1.vzi516').show();
    } else if ($(this).hasClass('vzi532')) {
        $('img.i5').show();
        $('h1.vzi532').show();
    } else if ($(this).hasClass('vzi564')) {
        $('img.i5').show();
        $('h1.vzi564').show();
    } else if ($(this).hasClass('vzi5c16')) {
        $('img.i5c').show();
        $('h1.vzi5c16').show();
    } else if ($(this).hasClass('vzi5c32')) {
        $('img.i5c').show();
        $('h1.vzi5c32').show();
    } else if ($(this).hasClass('vzi5c64')) {
        $('img.i5c').show();
        $('h1.vzi5c64').show();
    } else if ($(this).hasClass('vzi5s16')) {
        $('img.i5s').show();
        $('h1.vzi5s16').show();
    } else if ($(this).hasClass('vzi5s32')) {
        $('img.i5s').show();
        $('h1.vzi5s32').show();
    } else if ($(this).hasClass('vzi5s64')) {
        $('img.i5s').show();
        $('h1.vzi5s64').show();
    } else if ($(this).hasClass('uli48')) {
        $('img.i4').show();
        $('h1.uli48').show();
    } else if ($(this).hasClass('uli416')) {
        $('img.i4').show();
        $('h1.uli416').show();
    } else if ($(this).hasClass('uli432')) {
        $('img.i4').show();
        $('h1.uli432').show();
    } else if ($(this).hasClass('uli464')) {
        $('img.i4').show();
        $('h1.uli464').show();
    } else if ($(this).hasClass('uli4s16')) {
        $('img.i4s').show();
        $('h1.uli4s16').show();
    } else if ($(this).hasClass('uli4s32')) {
        $('img.i4s').show();
        $('h1.uli4s32').show();
    } else if ($(this).hasClass('uli4s64')) {
        $('img.i4s').show();
        $('h1.uli4s64').show();
    } else {
        return;
    }
    divForm[0].animate({"top": "+=557px"}, 500, function(){
        $(this).animate({"top": "-=20px"}, 200);
    }); 
});

这是jsFiddle:http://jsfiddle.net/6YUuT/

正如您所看到的,每个链接都调用相同的表单,但标题和图像会根据点击的链接而改变.我尝试过使用共享类,但我无法想出一个有效的修复方法.

修订和新问题:

我几乎已经完成了所有功能,但我遇到了原来的问题,这次是在另一个地方.我有另一个巨大的代码块需要消失,虽然它看起来几乎与最后一个相同,但它已经不同,我无法提出一个有效的解决方案.

这是jsFiddle:http://jsfiddle.net/9Pr8L/

以及令人不快/令人反感的代码块:

function linkHide() {
    //var r = /(?:^| )((?:tm|att|vz|sp|ul)(app?|bb?|htc?|lg?|mot?|sam?))(?: |$)/;
    if ($('span.tm').is(':visible') && $('span.app').is(':visible')) {
        $('td.tmapp').show();
    } 
    if ($('span.tm').is(':visible') && $('span.bb').is(':visible')) {
        $('td.tmbb').show();
    }
    if ($('span.tm').is(':visible') && $('span.htc').is(':visible')) {
        $('td.tmhtc').show();
    }
    if ($('span.tm').is(':visible') && $('span.lg').is(':visible')) {
        $('td.tmlg').show();
    }
    if ($('span.tm').is(':visible') && $('span.mot').is(':visible')) {
        $('td.tmmot').show();
    }
    if ($('span.tm').is(':visible') && $('span.sam').is(':visible')) {
        $('td.tmsam').show();
    }
    if ($('span.att').is(':visible') && $('span.app').is(':visible')) {
        $('td.attapp').show();
    }
    if ($('span.att').is(':visible') && $('span.bb').is(':visible')) {
        $('td.attbb').show();
    }
    if ($('span.att').is(':visible') && $('span.htc').is(':visible')) {
        $('td.atthtc').show();
    }
    if ($('span.att').is(':visible') && $('span.lg').is(':visible')) {
        $('td.attlg').show();
    }
    if ($('span.att').is(':visible') && $('span.mot').is(':visible')) {
        $('td.attmot').show();
    }
    if ($('span.att').is(':visible') && $('span.sam').is(':visible')) {
        $('td.attsam').show();
    }
    if ($('span.vz').is(':visible') && $('span.app').is(':visible')) {
        $('td.vzapp').show();
    }
    if ($('span.vz').is(':visible') && $('span.bb').is(':visible')) {
        $('td.vzbb').show();
    }
    if ($('span.vz').is(':visible') && $('span.htc').is(':visible')) {
        $('td.vzhtc').show();
    }
    if ($('span.vz').is(':visible') && $('span.lg').is(':visible')) {
        $('td.vzlg').show();
    }
    if ($('span.vz').is(':visible') && $('span.mot').is(':visible')) {
        $('td.vzmot').show();
    }
    if ($('span.vz').is(':visible') && $('span.sam').is(':visible')) {
        $('td.vzsam').show();
    }
    if ($('span.ul').is(':visible') && $('span.app').is(':visible')) {
        $('td.ulapp').show();
    }
    if ($('span.ul').is(':visible') && $('span.bb').is(':visible')) {
        $('td.ulbb').show();
    }
    if ($('span.ul').is(':visible') && $('span.htc').is(':visible')) {
        $('td.ulhtc').show();
    }
    if ($('span.ul').is(':visible') && $('span.lg').is(':visible')) {
        $('td.ullg').show();
    }
    if ($('span.ul').is(':visible') && $('span.mot').is(':visible')) {
        $('td.ulmot').show();
    }
    if ($('span.ul').is(':visible') && $('span.sam').is(':visible')) {
        $('td.ulsam').show();
    }
};

我现在已经缩减了HTML,以便所有表数据都存在于一个包含可变标题,图像和链接的表中.我能够编辑wared的正则表达式,以便它返回正确的字符串,但我想不出实际使用它的方法.

1 个回答

我假设每个锚只能有一个这样的类.在这种情况下,正则表达式允许您从类属性中提取此类,并同时从中提取图像类(this引用锚元素):

var r = /(?:^| )((?:tm|att|vz|ul)(i\d[a-z]?)\d\d?)(?: |$)/;
var m = $(this).attr('class').match(r);
if (m) {
    $('img.' + m[2]).show();
    $('h1.' + m[1]).show();
} else {
    return;
}

正则表达式:

(?:^| )            the beginning of the string or a whitespace
(...)              capture -> group 1 : the heading class
(?:tm|att|vz|ul)   any of these prefixes, one time
(...)              capture -> group 2 : the image class
i\d[a-z]?          "i" + one digit + any letter, zero or one times
\d\d?              one or two digits
(?: |$)            a whitespace or the end of the string



总结一下:

"tm" or "att" or "vz" or "ul"
+ "i" + one digit + zero or one letter (group 2, example : "i4s")
+ one or two digits


这将匹配字符串tmi416,atti4s16或vzi48.为了使事情更清楚,您可以打开浏览器控制台并将以下代码粘贴到其中:

'foo atti4s16 bar'.match(
    /(?:^| )((?:tm|att|vz|ul)(i\d[a-z]?)\d\d?)(?: |$)/
)


您可以看到返回的数组包含标题类(索引1 =组1)和图像类(索引2 =组2):

[" atti4s16 ", "atti4s16", "i4s"]


                
                    2023-02-06 15:39  回答
                       Joanna阿咪个_995



    
    
        今天，你开发时遇到什么问题呢？
        立即提问
    

    
        热门标签