0

我正在使用此代码将图像源 URL 插入 WordPress 管理面板的相关字段中。这是我的表单 HTML 结构的一部分（对该容器中的所有其他字段重复）：`

<table>
<tbody>
<tr valign="top">
    <th scope="row">
    Label for input field 1 :
    </th>
    <td>
    <input class="upload_button" type="button" value="Upload" />
    <input type="text" name="upload" class="upload-url" value="Empty"/>
    </td>
</tr>
<tr valign="top">
    <th scope="row">
    </th>
    <td class="upload-preview">
    <img src="Empty" alt="Preview" />
    </td>
</tr>
<tr valign="top">
    <th scope="row">
    Label for input field 2 :
    </th>
    <td>
    <input class="upload_button" type="button" value="Upload" />
    <input type="text" name="upload" class="upload-url" value="Empty"/>
    </td>
</tr>
<tr valign="top">
    <th scope="row">
    </th>
    <td class="upload-preview">
    <img src="Empty" alt="Preview" />
    </td>
</tr>
</tbody>
</table>

这是处理它的Javascript代码：`

var image_uploader;

jQuery("div#container").on('click', 'input.upload_button', function(e) {

    e.preventDefault();
    var formloc = jQuery(this).parent().parent();
    //If the uploader object has already been created, reopen the dialog
    if (image_uploader) {
        image_uploader.open();
        return;
    }

    //Extend the wp.media object
    image_uploader = wp.media.frames.file_frame = wp.media({
        title: 'Use Image',
        button: {
            text: 'Use Image'
        },
        multiple: false
    });

    //When a file is selected, grab the URL and set it as the text field's value
    image_uploader.on('select', function() {
        attachment = image_uploader.state().get('selection').first().toJSON();
        jQuery(formloc).next('tr').find('img').attr('src', attachment.url);
        jQuery(formloc).find('input.upload-url').val(attachment.url);

    });

    //Open the uploader dialog
    image_uploader.open();

});

我正在使用这种结构来保持表单看起来整洁（上传图像的预览显示在输入字段下方）。当一个人上传了图片时，应该将图片的 URL 插入到输入字段中，以及 img src 以立即显示它。

但是，问题是这只适用于第一次点击，即当我点击上传按钮 1 时，它按预期工作，但是当我点击上传按钮 2 时，更改仍将反映在应该被控制的区域上通过上传按钮 1。似乎 $(this) 仅记录第一个单击的按钮，此后不再更改。

我非常感谢您的帮助，看看那里出了什么问题。我一直在努力找出问题所在，但无济于事。如果您需要，我准备提供更多信息。

非常感谢您的帮助！

4

1 回答 1

0

似乎问题出在if(image_uploader)条件上。我认为第二次单击它会立即返回on，并且您在最后一次单击时挂钩的事件处理程序执行引用第一个单击的项目是正确的。

您应该尝试重构代码。

于 2013-08-09T06:53:35.870 回答