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并没有取代点击的图片。我错过了什么？

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

});

Answer 2

我会在每张图片上应用一个课程然后参考。因此，在点击功能中，我会执行以下操作。

实施例

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

单击时切换并替换图像

2 个答案: