Javascript 正在尝试更改4个图像 处境

大家好。我已经创建了四个并排的图像，其想法是：当我点击其中一个图像时，这个图像将被更改为另一个图像（具有更好的分辨率），而其他图像（案例存在）将返回到较差的分辨率

代码 HTML

---

我不知道如何继续。例如，在本例中，第四个图像将被更改为更好的图像，我不知道如何指定另一个图像返回到较差的状态。

HTML标记可以具有数据属性，为该标记指定特定数据。在本例中，我建议为每个图像添加两个数据属性，一个用于低分辨率，一个用于高分辨率

---

从那里，您可以将src属性替换为您需要的任何图像

为高分辨率和低分辨率添加数据属性。单击时自动将其全部切换回，然后更改您单击的属性

<img data-id="0" 
 data-hi-res="assets/images/front/grupo/grupo-bignardi-2-hi.png" 
 data-low-res="assets/images/front/grupo/grupo-bignardi-2-low.png"
 src="assets/images/front/grupo/grupo-bignardi-2.png" 
 alt="Grupo Bignardi - Soluções em Papel" class="pure-img imagensSelecionaveis"/>

---

Fiddle

好的，但是只有一张imagem可以以全分辨率观看，而其他的则不能。其想法是将.gif中的低质量图像更改为.jpg中的高质量图像。所以，我对src使用一个字段。是的，我理解。因此，将我解释的数据属性添加到图像标签中。然后，单击图像时，将src属性设置为data high res属性。当鼠标移出该图像时，将src属性设置回data low res属性。这将在高分辨率图像和低分辨率图像之间交换图像。如果此方法解决了问题，您将不需要

数据id

。

$('.imagensSelecionaveis').click(function(){
    var id = $(this).data("id");
    if(id == 3) {
        $(this).attr('src', 'assets/images/front/grupo/jandaia-atacado-2.png');
    }
});

<img data-id="0" 
 data-hi-res="assets/images/front/grupo/grupo-bignardi-2-hi.png" 
 data-low-res="assets/images/front/grupo/grupo-bignardi-2-low.png"
 src="assets/images/front/grupo/grupo-bignardi-2.png" 
 alt="Grupo Bignardi - Soluções em Papel" class="pure-img imagensSelecionaveis"/>

$('.imagensSelecionaveis').on('click', function(){

  // Reset all images to low-res
  $('.imagensSelecionaveis').each(function( index ) {
    $(this).attr('src', $(this).data('low-res'));
  });

  // The clicked image shows hi resolution image    
  $(this).attr('src', $(this).data('hi-res'));
});