Question

我需要在wp插件中使用自定义图像字段，一切正常上传/设置功能但在更改图像时有问题：问题：当我已有图像并需要替换我从媒体库中提取新图像并提交时，旧的图像保持可见，因此我有两个图像在视野中。

我认为问题出在select函数和附加部分，显然我在这里使用了错误的逻辑，下面是我的代码的jquery + html和问题的截图：

问题（两张图片）：第一个应该替换为新的选择图像（第二个图像）

这是我的代码：

$('#btn-upload-image').on('click', function(e) {
        e.preventDefault();

        var button = $(this);
        var figure = button.siblings("figure");

        var custom_uploader = wp.media({
                title: 'Insert image',
                library: { type : 'image' },
                button: { text: 'Use this image' },
                id: 'library-' + (Math.random() * 10),
                multiple: false
            }).on('select', function() {
                var attachment = custom_uploader.state().get('selection').first().toJSON();
                figure.append( $('<img/>', { 'src': attachment.url }) );
                inputImage.val(attachment.url);
                inputImageId.val(attachment.id);
        })
        .open();
    });

和html：

<div class="form-group">
                        <label>Image</label>
                        <figure></figure>
                        <button type="button" class="btn btn-primary" id="btn-upload-image">Upload Image</button>
                        <input type="hidden" name="image" id="input-image" />
                        <input type="hidden" name="image_id" id="input-image-id" />
                    </div>

Answer 1

问题在于：

figure.append( $('<img/>', { 'src': attachment.url }) );

append在目标元素的末尾插入内容，维护现有内容。在这种情况下，您想要的是用新内容（新图像）替换其中的内容，所以：

figure.html( $('<img/>', { 'src': attachment.url }) );

html将新目标元素替换为目标元素中的所有内容。

希望有所帮助！

Wordpress自定义图片上传

1 个答案: