单击时切换和替换图像

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，它将取代picture1和picture1将取代被点击的图片2或3。

在我的示例中，小图片可以很好地代替picture1，但是picture1并没有取代点击的图片。我错过了什么？

这里的工作演示小提琴

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

});

Answer 2

我会在每一张图片上申请一门课，然后参考它。因此，在单击函数中，我将执行以下操作。

示例

$('#imagereplacing).attr('src',$('.exampleClass').attr('src'));