Javascript / Jquery с использованием класса и идентификатора для совпадения указанных c идентификаторов друг с другом в загрузке медиафайлов WordPress

Question

Итак, я пытаюсь создать функцию, которая просматривает список идентификаторов и сопоставляет их друг с другом. Эта кнопка идет с этим текстовым полем и этим img. Все, что мне нужно, это чтобы оператор правильно сопоставил их друг с другом, поместив кнопку «Загрузить» с правильным полем ввода и соответствующим img. Я никогда не задавал вопрос на этом сайте за все годы, когда я им пользовался, потому что я обычно мог найти ответы даже на самые конкретные c проблемы. Я просто хотел поблагодарить вас в сообществе за годы вашей помощи, даже не подозревая об этом.

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:

Я добавил поле 'name' в получить данные поста и сохранить в 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 ("имя") 'передано' undefined '. Это было исправлено добавлением переменной var в начале для хранения имени, но в этом случае я переключился на получение идентификатора

Как видите, я добавил var elem; и elem = $ (this) .attr ('id');

Вот код для хранения идентификатора:

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

и здесь, чтобы использовать сохраненный идентификатор:

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();
  });
});

Спасибо, что нашли время, чтобы прочитать это. Если у вас есть какие-либо изменения или предложения по улучшению, как я уже сказал, пожалуйста, дайте мне знать!