jquery - 资产路径、指纹和缩略图切换器

Question

我对 RoR 非常缺乏经验，但只是继承了一个要完成的项目。

我们有一个 jQuery 函数附加到一些缩略图的“点击”事件，它可以换出更大的图像。由于资产路径指纹识别功能，这不起作用。javascript 函数中使用的方法只是通过从缩略图文件名（src 属性）中删除子字符串来获取大图像 URL。由于指纹散列从拇指到大文件不同，因此这是行不通的。

解决此类问题的最佳方法是什么？

    $('.thumb').click(function () {
        var thumbUrl = $(this).find('img').attr('src');
        var bigUrl = thumbUrl.replace('_tile', '');

这是javascript ...没有真正的“代码”，只是此控制器/视图的预编译资产在文件名中具有指纹哈希，并且大文件指纹与拇指文件指纹（自然）不同，因此字符串替换在图像交换功能不起作用。

score 1 · Accepted Answer

您可以将各种预期的 URL 存储在thumbdiv 中的数据属性中，或者任何最相关的地方。像这样：

<div class='thumb' 
     data-large-size='http://server/path/large.jpg'
     data-small-size='http://server/path/small.jpg'>
   ...
</div>

然后在 jQuery 中抓取它们：

$('.thumb').click(function () {
    var url = $(this).data('large-size');
    $(this).find('img').attr('src', url);
}

无需计算任何东西。url 可以由资产 URL 助手提供。

score 1 · Accepted Answer

我建议您在呈现 HTML 时将大图像 url 作为数据属性添加到 img 标签中，然后您可以在 javascript 函数中将其拉出，例如：

在您的 ERB 模板中：

<%= image_tag(
  "thumb.jpg",
  :data => { "large_image_url" => image_url("large.jpg") }
) %>

然后，在你的 JS 中：

$('.thumb').click(function () {
  var bigURL = $(this).data("large_image_url");
  ...
});

2 回答 2