多个按钮相同的功能将值分配给不同的文本字段答案

【问题标题】：Multiple buttons same functions assign value to different textfields多个按钮相同的功能将值分配给不同的文本字段
【发布时间】：2019-07-19 03:43:52
【问题描述】：

这就是我想要做的，我有 2 个按钮和 2 个字段。这 2 个按钮具有相同的选择器，但具有不同的数据属性。我希望在单击其中一个按钮时，它会获取值并将其添加到指定的文本字段中。我当前的代码仅适用于我单击的第一个字段，之后，如果我单击第二个按钮，它不会在第二个字段上分配值，它会在我首先选择的任何按钮上分配值。

这是我的字段：

第一个按钮及其指定的文本字段：

第二个按钮及其指定的文本字段：

jQuery(document).ready(function($) {
  var mediaUploader;
  $('.upload_image_button').on('click', function(e) {
    e.preventDefault();
    var buttonID = $(this).data('group');
    if (mediaUploader) {
      mediaUploader.open();
      return;
    }
    mediaUploader = wp.media.frames.file_frame = wp.media({
      title: 'Choose Image',
      button: {
        text: 'Choose Image'
      },
      multiple: false
    });
    mediaUploader.on('select', function() {
      var attachment = mediaUploader.state().get('selection').first().toJSON();
      $('#upload_image_' + buttonID).val(attachment.url);
    });
    mediaUploader.open();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="upload_image_1" type="text" name="upload_image_1" value="<?php echo get_option('upload_image_1'); ?>" class="regular-text" />
<input id="upload_image_button" type="button" class="upload_image_button button-primary" value="Insert Image" data-group="1" />
<input id="upload_image_2" type="text" name="upload_image_2" value="<?php echo get_option('upload_image_1'); ?>" class="regular-text" />
<input id="upload_image_button" type="button" class="upload_image_button button-primary" value="Insert Image" data-group="2" />

【问题讨论】：

ids 必须是唯一的，并且两个按钮上都有 id="upload_image_button"
在您的代码中包含 php echo 语句并没有帮助，您可以在此处回显任何内容。渲染的 html 代码是什么？
我使用类作为按钮的选择器。这是呈现的 html 字段和按钮：

标签： javascript jquery wordpress

【解决方案1】：

您可能希望在return; 之前取消绑定select 事件，@JasonB 的建议也很有效。我试图创建一个示例，但我不知道它是否会有所帮助：

jQuery(document).ready(function($) {
  var mediaUploader;
  var buttonID;
  $('.upload_image_button').on('click', function(e) {
    e.preventDefault();
    buttonID = $(this).data('group');
    if (mediaUploader) {
      $("select").unbind('change');
      console.log('open media');
      //return;
    }
    mediaUploader = 1;
    /*wp.media.frames.file_frame = wp.media({
          title: 'Choose Image',
          button: {
            text: 'Choose Image'
          },
          multiple: false
        });
        mediaUploader.on('select', function() {
          var attachment = mediaUploader.state().get('selection').first().toJSON();
          */
    $("select").on('change', function() {
      $('#upload_image_' + buttonID).val('value');
      alert();
    });
    /*
        });
        mediaUploader.open();*/
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="upload_image_1" type="text" name="upload_image_1" value="" class="regular-text">
<input type="button" class="upload_image_button button-primary" value="Insert Image" data-group="1">
<input id="upload_image_2" type="text" name="upload_image_2" value="" class="regular-text">
<input type="button" class="upload_image_button button-primary" value="Insert Image" data-group="2">
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

【讨论】：

【解决方案2】：

代码有一个 if 语句，旨在防止重新初始化媒体上传器。

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

删除此代码，以便在您每次单击按钮时重新创建您的 mediaUploader，而不是重新使用具有初始值的存储的。

【讨论】：