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

Working Demo

如何用jquery更改src img中的一些片段？

3 个答案: