如何优化这个jQuery代码？

Question

我正在寻找如何简化我的jQuery代码并避免重复的帮助。我知道这可以通过使用OOP来实现，但我没有足够的知识如何正确执行此操作。有没有办法避免body.on（'点击'）重复？

这里是我的JavaScript代码：（更新）

jQuery(document).ready(function($) { 

    /* WordPress Media Uploader 
    -------------------------------------------------------*/ 
    function upload(type) { 

    if (mediaUploader) { 
     mediaUploader.open(); 
    } 

    var mediaUploader = wp.media.frames.file_frame = wp.media({ 
     title: 'Select an Image', 
     button: { 
     text: 'Use This Image' 
     }, 
     multiple: false 
    }); 

    mediaUploader.on('select', function() { 
     var attachment = mediaUploader.state().get('selection').first().toJSON(); 
     console.log(attachment); 
     $('.deo-' + type + '-hidden-input').val(attachment.url); 
     $('.deo-' + type + '-media').attr('src', attachment.url); 
    }); 

    mediaUploader.open(); 

    } 

    $('body').on('click', '.deo-image-upload-button', function() { 
    upload('image'); 
    }); 

    $('body').on('click', '.deo-signature-upload-button', function() { 
    upload('signature'); 
    }); 

    $('body').on('click', '.deo-image-delete-button', function(e) { 
    $('.deo-image-hidden-input').val(''); 
    $('.deo-image-media').attr('src', ''); 
    }); 

    $('body').on('click', '.deo-signature-delete-button', function(e) { 
    $('.deo-signature-hidden-input').val(''); 
    $('.deo-signature-media').attr('src', ''); 
    }); 

}); 

Answer 1

你可以在这样的单击事件减少，

$('body').on('click', '.deo-image-upload-button, .deo-signature-upload-button, .deo-image-delete-button, .deo-signature-delete-button', function() { 
    if ($(this).hasClass('deo-image-upload-button')) { 
     upload('image'); 
    } else if ($(this).hasClass('deo-signature-upload-button')) { 
     upload('signature'); 
    } else if ($(this).hasClass('deo-image-delete-button')) { 
     $('.deo-image-hidden-input').val(''); 
     $('.deo-image-media').attr('src', ''); 
    } else if ($(this).hasClass('deo-signature-delete-button')) { 
     $('.deo-signature-hidden-input').val(''); 
     $('.deo-signature-media').attr('src', ''); 
    } 
    }); 

这里是一个Fiddle您测试

Answer 2

我用属性选择 “合并” 相似的功能。

它没有测试，但应该工作。

jQuery(document).ready(function($) { 

    /* WordPress Media Uploader 
    -------------------------------------------------------*/ 
    var imgSign = ""; 
    var attachment; 

    mediaUploader.on('select', function() { 
    attachment = mediaUploader.state().get('selection').first().toJSON(); 
    console.log(attachment); 
    $('.deo-'+imgSign+'-hidden-input').val(attachment.url); 
    $('.deo-'+imgSign+'-media').attr('src', attachment.url); 
    }); 

    // Image or signature click 
    $('body').on('click', '[class*="-upload-button"]', function(e) { 
    e.preventDefault(); 

    $(this).hasClass("deo-image-upload-button") ? imgSign = "image" : imgSign = "signature"; 

    if (mediaUploader) { 
     mediaUploader.open(); 
    } 

    // Empty attachements. 
    attachment = ""; 
    var mediaUploader = wp.media.frames.file_frame = wp.media({ 
     title: 'Select an Image', 
     button: { 
     text: 'Use This Image' 
     }, 
     multiple: false 
    }); 



    mediaUploader.open(); 
    }); 

    // Image or signature delete 
    $('body').on('click', '[class*="-delete-button"]', function(e) { 
    $(this).hasClass("deo-image-delete-button") ? imgSign = "image" : imgSign = "signature"; 
    $('.deo-'+imgSign+'-hidden-input').val(''); 
    $('.deo-'+imgSign+'-media').attr('src', ''); 
    }); 

}); 

我不知道mediaUploader.open(); ...经常调用它真的有用吗？