大家好。我并排创建了四个图像,其思路是:当我点击其中一个图像时,此图像将被更改为另一个(具有更好的分辨率),而其他图像(存在的情况)将返回到较差的分辨率。 / p>
<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"/>
$('.imagensSelecionaveis').click(function(){
var id = $(this).data("id");
if(id == 3) {
$(this).attr('src', 'assets/images/front/grupo/jandaia-atacado-2.png');
}
});
我不知道该怎么办。在这种情况下,例如,第四个图像将更改为一个更好,我不知道如何指定另一个图像返回到你的不良状态。
答案 0 :(得分:0)
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属性。
答案 1 :(得分:0)
为高分辨率和低分辨率添加数据属性。单击时自动将它们全部切换回来,然后更改您单击的那个。
<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'));
});