Question

我在WordPress的自定义元框中创建自定义字段。我输入的文本字段，textareas和复选框都运行正常。我还为图片库添加了一个浏览按钮。

当您单击“浏览”按钮时，它会拉出WordPress媒体上传屏幕，当您选择该图像时，它将替换输入值（以及图像缩略图）。

以下是WordPress元框设置的相关部分。

function show_custom_fields_meta_box() {
    global $post;  
    $meta = get_post_meta( $post->ID, 'custom_fields', true ); ?>
    <input type="hidden" name="custom_meta_box_nonce" value="<?php echo wp_create_nonce( basename(__FILE__) ); ?>">

    <!-- image upload field -->
    <p>
      <label for="custom_fields[image]">Image Upload</label><br>
      <input type="text" name="custom_fields[image]" id="custom_fields[image]" class="meta-image regular-text" value="<?php echo $meta['image']; ?>">
      <input type="button" class="button image-upload" value="Choose or Upload an Image">
      <div class="image-preview"><img src="<?php echo $meta['image']; ?>" style="max-width: 250px;"></div>
    </p>
 }

这是我用来打开WordPress媒体库并上传图片的jQuery。

<script>
    /*
     * Attaches the image uploader to the input field
     */
    jQuery(document).ready(function ($) {

        // Instantiates the variable that holds the media library frame.
        var meta_image_frame;
        // Runs when the image button is clicked.
        $('.image-upload').click(function (e) {
            // Prevents the default action from occuring.
            e.preventDefault();

            var selected = $(this);
            var meta_image = $('.meta-image');

            // If the frame already exists, re-open it.
            if (meta_image_frame) {
                meta_image_frame.open();
                return;
            }
            // Sets up the media library frame
            meta_image_frame = wp.media.frames.meta_image_frame = wp.media({
                title: meta_image.title,
                button: {
                    text: meta_image.button
                }
            });
            // Runs when an image is selected.
            meta_image_frame.on('select', function () {
                // Grabs the attachment selection and creates a JSON representation of the model.
                var media_attachment = meta_image_frame.state().get('selection').first().toJSON();
                // Sends the attachment URL to our custom image input field.
                $('.meta-image').val(media_attachment.url);

                var imgurl = $('.meta-image').val();

                $(selected).prev().val(imgurl);
                $(selected).closest('div').find('.image-preview').children('img').attr('src',imgurl);
            });
            // Opens the media library frame.
            meta_image_frame.open();
        });
    });
</script>

现在，这完全正常。 input按钮的类别为.image-upload，input文本字段的类别为meta-image。

但是，如果我添加另一个字段......（custom_fields[image2]）

<p>
  <label for="custom_fields[image2]">Image Upload</label><br>
  <input type="text" name="custom_fields[image2]" id="custom_fields[image2]" class="meta-image regular-text" value="<?php echo $meta['image2']; ?>">
  <input type="button" class="button image-upload" value="Choose or Upload an Image">
  <div class="image-preview"><img src="<?php echo $meta['image2']; ?>" style="max-width: 250px;"></div>
</p>

jQuery将应用于两个浏览按钮和文本输入，因为它是一个类。我知道（想）我必须使用某种形式的$(this)来获得正确的按钮和文本输入，但到目前为止我所有的努力都是徒劳的。

我已经尝试了$(this).closest('.meta-image')，但这似乎不起作用。

谢谢！

Answer 1

您可以在select事件处理程序中使用变量 selected 。

试试这个：

# plot 3d surface
# create a meshgrid of (x,t) points
# T and X are 2-d arrays
T, X = np.meshgrid(t,x)
fig = plt.figure()
ax = fig.add_subplot(111, projection='3d')
# Use X and T arrays to plot u 
# shape of X, T and u must to be the same
# but shape of u is [40,1601] and I will skip last row while plotting
surf = ax.plot_surface(X, T, u[:,:1600], rstride=1, cstride=1, cmap=cm.coolwarm, linewidth=0, antialiased=False)
fig.colorbar(surf, shrink=0.5, aspect=5)
plt.show()

Answer 2

我能够用这段代码完成：

var meta_image = $(this).parent().children('.meta-image');

仅将图片上传网址应用于特定输入字段

2 个答案: