使用 jquery 更改动态加载图像的 src答案

【问题标题】：Changing src of dynamically loaded images with jquery使用 jquery 更改动态加载图像的 src
【发布时间】：2014-05-16 00:41:47
【问题描述】：

我有一个动态加载一个或多个图像的 div。最初，所有这些图像都是作物。目的是，当用户单击裁剪后的图像时，其 src 将被完整大小的版本替换。单击完整大小的版本以返回裁剪后的图像。我不知道图像的文件名，除了它们都是数字，除了完整版的文件名中的第一个字符是“L”。

这段代码有效，但我相信一定有更简单的方法：

$('#class').on('click', '> img', function() {
var src = $(this).attr('src');
var test_src = src.match(/L/g);
var img_id = src.replace(/L/g, '');
var big_img = src.replace('/images/', '/images/L');
if (test_src == undefined) {
  $(this).attr('src', big_img)
    } else {
  $(this).attr('src', img_id);
   }
});

我只能用这段代码解决的问题是，如果我只是获得了 img src 并添加了一个“L”，那么在第一次点击之后，img src 就会变成类似“/images/L123345.jpg”的东西，因此，再次单击它以返回原始 src ('/images/12345.jpg') 只是添加了第二个 L。

我确定我错过了一些非常明显的东西。感谢您的任何建议。

【问题讨论】：

你试过if (test_src == null)而不是if (test_src == undefined)
否 - 但如前所述，此代码工作正常。我只是认为这是一种非常复杂的方法来做一些简单的事情。
您对img 标签的生成有多少控制权？您可以将号码存储在id 属性中吗？如果您最初有例如，我可以想到一些更简单的方法。 <img id="12345" class="class" src="/images/12345.jpg">
是的，我可以添加一个 id = [image id]。出于某种我现在无法理解的原因，我希望避免这样做。

标签： jquery image src

【解决方案1】：

当您可以向图像添加其他属性时，一种选择是将基本图像文件名存储在id 或data-* attribute（如果您使用的是 HTML5）中。像

这样的图片

<img src="/images/1234.jpg" class="class" data-id="1234">
<img src="/images/L5678.jpg" class="class" data-id="5678">

以下函数将构建一个新的src 属性，以将大小从其当前值交换。它首先通过检索 ID 来执行此操作，然后定义一个变量 lg，如果 current 源包含“L”，则该变量为空字符串，否则等于“L”。最后，它将两者以及路径和文件扩展名串在一起。

$('.class').on('click', '> img', function() {
    var id = $(this).attr('data-id');
    var lg = ($(this).attr('src').match(/L/) !== null) ? '' : 'L';
    $(this).attr('src', '/images/' + lg + id + '.jpg');
});

【讨论】：

非常整洁。谢谢。效果很好。

【解决方案2】：

您可以尝试使用 jQuery 类方法。不确定它是否更简单，但我觉得它更容易阅读。

$('#class').on('click', '> img', function() {
  var src = $(this).attr('src');
  if ($(this).hasClass('small')) {
    src.replace('/images/', '/images/L');
    $(this).removeClass('small');
    $(this).addClass('large');
  }
  else if ($(this).hasClass('large')) {
    src.replace('/images/L', '/images/');
    $(this).removeClass('large');
    $(this).addClass('small');
  }
  $(this).attr('src', src);

});

【讨论】：

【解决方案3】：

这可能行得通...

var $img = $("<img>");

$img.on('load', function (e) {
    this.$photoImageManager.attr('src', e.target.src);
}.bind(this));

$img.attr('src', "../../users/" + userId + "/" + userId + "-photo.png");

【讨论】：