如何简明扼要地遵循 jquery 代码片段


How to concise following jquery code snippet

我有以下jQuery代码,它工作正常,但加载速度很慢。 我不是 jQuery 的专业人士,所以任何人都可以帮助我使以下代码片段更简洁吗?我会很感激的。

jQuery(document).ready(function() {
    // colorpicker field
    jQuery('.twb_btn_color, .twb_spam_clr, .twb_btn_txt_color, .twb_bg_color, .twb_main_title_color, .twb_sub_title_color')
        .each(function(){
            var $this = jQuery(this),
                id = $this.attr('rel');
            $this.farbtastic('#' + id).hide();
            jQuery('.twb, .twb-title').click(function() {
                jQuery('.twb_btn_color').fadeIn('medium').siblings("div").hide();
            });
            jQuery('.twb-spam, .twb-spam-title').click(function() {
                jQuery('.twb_spam_clr').fadeIn('medium').siblings("div").hide();
            });
            jQuery('.twb-btn-txt-color, .twb-btn-txt-color-title').click(function() {
                jQuery('.twb_btn_txt_color').fadeIn('medium').siblings("div").hide();
            });
            jQuery('.twb-bg-color, .twb-bg-color-title').click(function() {
                jQuery('.twb_bg_color').fadeIn('medium').siblings("div").hide();
            });
            jQuery('.twb-main-title-color, .twb-main-title-color').click(function() {
                    jQuery('.twb_main_title_color').fadeIn('medium').siblings("div").hide();
            });
            jQuery('.twb-sub-title-color, .twb-sub-title-color').click(function() {
                jQuery('.twb_sub_title_color').fadeIn('medium').siblings("div").hide();
            });
    });
});

处理此问题的典型方法是为要对同一类名执行相同操作的所有元素提供相同的操作。

此外,为了不必将事件绑定到它们中的每一个,您可以将事件委托给公共父级,在这种情况下,我们将使用 body

$('body').on('click', '.common-class-name', function () {
   $(this).fadeIn('medium').siblings("div").hide();
});

这要求您为所有元素指定相同的类名。然后,您可以引用已单击的那个 $(this) .