javascript - 如何优化这个 jQuery 代码？

Question

我正在寻找如何简化 jQuery 代码并避免重复的帮助。我知道它可以使用 OOP 来实现，但我没有足够的知识如何正确地做到这一点。有没有办法避免 body.on('click') 重复？

这是我的 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供您测试