使用类和ID的Javascript / Jquery在WordPress媒体上传中将特定ID相互匹配

Question

因此，我想做的是提供一个通过ID列表运行并将其相互匹配的函数。该按钮与该文本框和此img一起使用。我需要的是，通过将正确的“上载”按钮与正确的输入框和相应的img放置在一起，使语句正确地彼此匹配。在使用该网站的所有年份中，我从未真正在此网站上提出过任何问题，因为我一般都能找到最具体问题的答案。我只是想感谢社区中的人们多年来所提供的帮助，甚至根本不知道。

PHP：

<input id="background_image_text_0" type="text" name="background_image_text_0" value="<?php echo get_option('background_image_0'); ?>" />
<input id="upload_button_0" type="button" class="upload_image_button button-primary" value="Insert Image" />
<img id="background_image_0" src="<?php echo get_option('background_image_0'); ?>" />

<input id="background_image_text_1" type="text" name="background_image_text_1" value="<?php echo get_option('background_image_1'); ?>" />
<input id="upload_button_1" type="button" class="upload_image_button button-primary" value="Insert Image" />
<img id="background_image_1" src="<?php echo get_option('background_image_1'); ?>" />

Javascript：

jQuery(document).ready(function($){
  var mediaUploader;
  $('.upload_image_button').click(function(e) {
    e.preventDefault();
      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();

            var elements = document.querySelectorAll('.upload_image_button');
            for (var i = 0; i < elements.length; i++) {

                alert(elements[i].name);

                if($(this).attr("name") == 'upload_button_' + i)
                {
                    image = document.getElementById('#background_image_' + i);
                    image.src = attachment.url;
                    $('#background_image_text_' + i).val(attachment.url);
                }
            //alert(elements[i].name);
            }
      // placeholder for original
      //$('#background_image_text_0').val(attachment.url);
    });
    mediaUploader.open();
  });
});

Answer 1

我已经找到了解决问题的方法，现在将其提供给您。如果您有任何使代码更易读的修订，或者有帮助代码更符合正确标准的建议，请随时添加！我确实要求在发表评论时，您提供的是一种解决方案，而不仅仅是批评，它对任何人都没有帮助。

因此，PHP代码：

我添加了一个“名称”字段来获取帖子数据并保存在WordPress中。

<input id="background_image_text_0" type="text" name="background_image_text_0" value="<?php echo get_option('background_image_0'); ?>" />
<input id="upload_button_0" type="button" class="upload_image_button button-primary" value="Insert Image" />
<img id="background_image_0" name="background_image_0" src="<?php echo get_option('background_image_0'); ?>" />

<input id="background_image_text_1" type="text" name="background_image_text_1" value="<?php echo get_option('background_image_1'); ?>" />
<input id="upload_button_1" type="button" class="upload_image_button button-primary" value="Insert Image" />
<img id="background_image_1" name="background_image_1" src="<?php echo get_option('background_image_1'); ?>" />

<input id="background_image_text_2" type="text" name="background_image_text_2" value="<?php echo get_option('background_image_2'); ?>" />
<input id="upload_button_2" type="button" class="upload_image_button button-primary" value="Insert Image" />
<img id="background_image_2" name="background_image_2" src="<?php echo get_option('background_image_2'); ?>" />

JavaScript：

原始代码不起作用的原因之一是因为'$（this）.attr（“ name”）'传递了'undefined'。通过在开头添加一个var来保存“名称”来解决此问题，但在这种情况下，我切换到获取“ id”

如您所见，我添加了var elem;和elem = $（this）.attr（'id'）;

这里是存储ID的代码：

  var elem;
  $('.upload_image_button').click(function(e) {
    e.preventDefault();
    elem = $(this).attr('id');
      if (mediaUploader) {
      mediaUploader.open();
      return;
    }

这里使用存储的ID：

if(elem == 'upload_button_' + i)
{
 var image = document.getElementById('background_image_' + i);
 image.src = attachment.url;
 $('#background_image_text_' + i).val(attachment.url);
}

下一个问题很简单。 image = document.getElementById（'＃background_image_'+ i）;不需要'＃'

修复：

 var image = document.getElementById('background_image_' + i);

整个代码：

jQuery(document).ready(function($){
  var mediaUploader;
  //set variable 'elem' to pass $(this).attr('id') in a bit
  var elem;
  $('.upload_image_button').click(function(e) {
    e.preventDefault();
    elem = $(this).attr('id');
      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();

            var elements = document.querySelectorAll('.upload_image_button');
            for (var i = 0; i < elements.length; i++) {

                if(elem == 'upload_button_' + i)
                {

                    //this was set with '#background_image_' no need for '#'
                    var image = document.getElementById('background_image_' + i);
                    image.src = attachment.url;
                    $('#background_image_text_' + i).val(attachment.url);
                }

            }

    });
    mediaUploader.open();
  });
});

感谢您抽出宝贵时间阅读本文档。如您所说，如果您有任何修改或改进建议，请让我知道！