javascript - 点击切换和替换图像

Question

我试图在单击时替换和切换图片，但我的代码出现了问题。我可以改变大局，但小局不会改变。

这是我目前所拥有的:

html

<div class="image_container">
       <a  href="" >
    <img  class="big_image" src="picture1" />
      </a>
</div>
<div class="pics_container">
  <img class="lilla" src="picture2"  />
  <img class="lilla" src="picture3"  />
</div>

   $('.lilla').on('click',function(){
          $('.big_image').attr('src',$(this).attr('src')); 
          $(this).attr('src',$('.big_image').attr('src'));
    })

我想要的是，当我点击图片 2 或 3 时，它会出现在图片 1 的位置，而图片 1 将取代点击的图片 2 或 3。

在我的示例中，小图片可以很好地替换 picture1，但 picture1 没有替换被单击的图片。请问我错过了什么？

working Demo fiddle here

Answer 1

在将大图像换出之前，您需要一个变量来存储大图像的来源

$('.lilla').on('click',function(){
      var big_src = $('.big_image').attr('src');

      $('.big_image').attr('src', $(this).attr('src')); 

      $(this).attr('src', big_src);

});