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

我使用属性选择器来“合并”类似的函数。

它没有经过测试，但应该有效。

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(); ......经常这么称呼它真的很有用吗？

Answer 2

您可以最小化点击事件，

 $('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供您测试

如何优化这个jQuery代码？

2 个答案: