如何優化這個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(); ...經常調用它真的有用嗎？