jquery - 如何使用 jquery 更改 src img 中的某些片段？

Question

我有 2 个 div，我尝试在单击预览时将 div 类中的 src 更改为大，我只需要通过“预览”更改世界“大”，没有找到好方法

<div class="big"> <img src="image_big_123"> </div>
<div class="preview"> <img src="image_preview_642.jpg"> </div>

$('.preview').click(function(){ 
$('.big').attr('src', '?');
});

Result exepcted for this exemple , when you click on the div class preview , src image in div class big change for `<img src="image_preview_123">` ,

所以 src 中只有一个世界变化

感谢任何帮助

Answer 1

很简单，在javascript中使用replace函数：

var preview2big = $('#preview img').attr('src').replace("_preview_", "_big_");
// in your code:
$('.big img').attr('src', $('#preview img').attr('src').replace("_preview_", "_big_") );

它有点不清楚你想要什么，不确定你想要的来源和替换什么=，原理保持不变。

多一点原生 JS（我更喜欢，也更容易阅读）：

$('.big img')[0].src = $('#preview img')[0].src.replace("_preview_", "_big_");

---

或者更像是一个切换（如果你需要的话）：

var newSrc = $('#preview img')[0].src;
var newSrc = newSrc.test(/_preview_/) ? newSrc.replace('_preview_', '_big_') : newSrc.replace('_big_', '_preview_');

$('.big img')[0].src = newSrc ; // this is preview if it was big ans vica versa

Answer 2

您可以使用替换：

 var source = $('.big').find('img').attr('src'); //Get the current source
 var newsource = source.replace('big', 'preview'); // Replace the word 'big' with preview' 

 $(".big").find('img').attr('src', newsource); //Set the new source

所以你的最终代码是：

<div class="big"> <img src="image_big_123"> </div>
<div class="preview"> <img src="image_preview_642.jpg"> </div>

$('.preview').click(function(){ 
   var source = $('.big').find('img').attr('src');
   var newsource = source.replace('big', 'preview');
   $(".big").find('img').attr('src', newsource);
});

Answer 3

试试这个：

$('.preview').click(function() {
   var prev = $('.big').children('img').attr('src').substring(10); 
   var newsrc = 'image_preview_'+prev;
  $('.big').children('img').attr('src', newsrc)
});

工作演示