时间戳

首页 > 解决方案 > Javascript/Jquery 使用类和 Id 在 WordPress 媒体上传中将特定 Id 相互匹配

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

问题描述

所以我想做的是有一个函数可以遍历一个 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();
  });
});

标签： javascriptphpjqueryhtmlwordpress

解决方案

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

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

感谢您抽出时间来阅读。如我所说，如果您有任何编辑或改进建议，请告诉我！

推荐阅读