修改图像SRC并附加到Div-Java 学习之路

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

我有一个包含图像的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"

我确信这很简单，但我有一个心灵转储，无法让它工作 .

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

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

回复于 2024-05-02T10:31:51+08:00

修改图像SRC并附加到Div

1 回答

相关问题