Question

我有一个动态加载一个或多个图像的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（'/ images12345.jpg'）刚刚添加了第二个L.

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

Answer 1

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

});

Answer 2

如果您可以为图片添加其他属性，则可以选择将基本图片文件名存储在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属性。如果当前源包含＆＃39; L＆＃39;并且等于＆＃，则首先检索ID，然后定义变量lg，这是一个空字符串。 39，L＆＃39;除此以外。最后，它将两者结合在一起，以及路径和文件扩展名。

$('.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');
});

Answer 3

这可能有用......

for(Map.Entry<String,String> entry : map.entrySet()) {...}

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

3 个答案: