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

Posted 2023-05-09

【中文标题】使用 jquery 更改动态加载图像的 src

【英文标题】：Changing src of dynamically loaded images with jquery

【发布时间】：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]。出于某种我现在无法理解的原因，我希望避免这样做。

【参考方案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");