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

我有一个动态加载了一个或多个图像的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

---

我肯定我错过了一些非常明显的事情。谢谢您的建议。

您可以尝试使用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);

});

---

当您可以向图像添加其他属性时，一个选项是将基本图像文件名存储在

id

中，或者如果您使用的是HTML5，则存储在一个文件中。 使用图像，例如

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

这可能有用

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");

---

var$img=$（“您是否尝试过
if（test\u src==null）
而不是
if（test\u src==undefined）
否-但如前所述，此代码工作正常。我只是认为这是一种非常复杂的方法来做一些简单的事情。您对
img
标记的生成有多大的控制权？您能否将数字存储在
id
属性中？如果您最初有
是，我可以想出一些更简单的方法，我可以添加一个id=[image id]。出于某种我现在无法理解的原因，我希望避免这样做。非常整洁。谢谢。效果很好。
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");