修改图像 SRC 并附加到 Div答案

【问题标题】：Amend Image SRC and Append to Div修改图像 SRC 并附加到 Div
【发布时间】：2016-03-29 00:06:33
【问题描述】：

** 更新，仍在努力解决这个问题。任何帮助，将不胜感激。谢谢。 **

我有一个包含图像的 HREF：

<a href="#" class="small-gallery">
    <img src="001.jpg">
</a>

单击此图像时，会出现一个弹出模式 (Bootstrap)，并使用 HREF 中显示的相同图像填充模式主体（即模式的内容）。即：

$('.thumbnail').click(function(e){
  e.preventDefault();
  $($(this).parents('.small-gallery').html()).appendTo('.modal-body');
  $('#myModal').modal({show:true});
});

这一切都很好，但我真正想做的是改变出现在模态体中的图像SRC，以便它从图像中获取SRC（即001.jpg）并添加一个字符串“-m " 在图像扩展之前，因此它将图像 SRC 更改为 "001-m.jpg"

所以事件的顺序是：

点击.small-gallery href
从 .small-gallery img 抓取图像 SRC
在 .modal-body 中输出完整的图像标签，但确保图像 SRC 在 .jpg 扩展名之前有“-m”

我确定这很简单，但我脑子有问题，无法正常工作。

提前感谢您的帮助，圣诞快乐！

【问题讨论】：

标签： javascript jquery image twitter-bootstrap src

【解决方案1】：

在另一个论坛的帮助下解决了这个问题...

与其拆分字符串，不如在数据属性中提供新源并获取它。

例如

<a href="#" class="small-gallery">
    <img data-img-modal="001-m.jpg" class="thumbnail" src="001.jpg">
</a>

$('.thumbnail').click(function(e){
  e.preventDefault();
  var myClone = $(this).closest('.small-gallery').clone();
  var theImg =  myClone.find('img');
  var newSrc = $(this).data('img-modal'); 
  theImg.removeClass('thumbnail').attr("src", newSrc);
  myClone.appendTo('.modal-body');
 $('#myModal').modal({show:true});
});

【讨论】：