情况

Question

情况

大家好。我并排创建了四个图像，其思路是：当我点击其中一个图像时，此图像将被更改为另一个（具有更好的分辨率），而其他图像（存在的情况）将返回到较差的分辨率。 / p>

代码

HTML

<img data-id="0" src="assets/images/front/grupo/grupo-bignardi-2.gif" alt="Grupo Bignardi - Soluções em Papel" class="pure-img imagensSelecionaveis"/>          
<img data-id="1" src="assets/images/front/grupo/bignardi-papeis.gif" alt="Bignardi Papéis" class="pure-img imagensSelecionaveis"/>
<img data-id="2" src="assets/images/front/grupo/jandaia.gif" alt="Jandaia" class="pure-img imagensSelecionaveis"/>
<img data-id="3" src="assets/images/front/grupo/jandaia-atacado.gif" alt="Jandaia - Atacado em Papelaria" class="pure-img imagensSelecionaveis"/>

的Javascript

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

我不知道该怎么办。在这种情况下，例如，第四个图像将更改为一个更好，我不知道如何指定另一个图像返回到你的不良状态。

Answer 1

HTML标记可以具有指定该标记的特定数据的数据属性。在这种情况下，我建议为每个图像添加两个数据属性，每个属性用于低分辨率和高分辨率。

<img src="assets/images/front/grupo/grupo-bignardi-2.png" data-high-res="grupo-bignardi-2.png" data-low-res="grupo-bignardi-2-low-res.png"/>

从那里你可以用你需要的任何图像换掉src属性。

Answer 2

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

<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"/>

的jQuery

$('.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'));
});

小提琴http://jsfiddle.net/24rtLwgn/

试图改变4张图像

情况

代码

HTML

的Javascript

2 个答案: