jquery - 加载页面后在基础交换中添加新规则

Question

我正在构建一个带有用户配置文件的 WordPress 主题。

在用户个人资料页面，我喜欢允许最终用户上传他/她的个人照片。在页面呈现时，我使用 Foundation 交换器，以便根据屏幕尺寸显示正确的图像尺寸。

到目前为止一切看起来都不错，但是在用户为他的个人资料选择所需的图片后，我如何使用 Foundation Interchange 重复相同的过程？

更具体:

我的替换当前图片的代码是这样的:

var $img_elm = $('#profile_picture');

attachment          =   $media_dialog.state().get('selection').first().toJSON();

$attachment_id      =   attachment.id;
$attachment_medium  =   attachment.sizes.thumbnail.url;
$attachment_large   =   attachment.sizes.custom_size.url;

$interchange_url    =   '[' + $attachment_large + ', (default)], [' + $attachment_medium + ', (small)], [' + $attachment_medium + ', (medium)], [' + $attachment_large + ', (large)]';

$img_elm.attr('data-interchange', $interchange_url);

所以，基于 Foundation documentation ，我应该在脚本末尾运行这段代码以更新我的 img 元素:

$(document).foundation();

但是，我已经试过了，画面还是一样。

我做错了什么吗？有没有其他方法可以达到相同的结果？

Answer 1

经过对 Foundation.interchange.js 的长期研究，我发现我可以使用以下代码来更新新选择的图像:

Foundation.libs.interchange.init($, 'update_images',    null);
Foundation.libs.interchange.init($, 'resize',           null);