1

Quando passo o mouse quero que ele altere a imagem de fundo somente de uma imagem ao inves de todas de uma vez

 <img  class=" imagem-do-produto"  data-hover="https://alfabetoauto.com.br/image/cache/catalog/product-3910/tapete-jeep-cherokee-antigo-borracha-a38983-0-1-2-200x200.jpeg" data-original="https://media-exp1.licdn.com/dms/image/C4D0BAQFx7KxsQwTjWA/company-logo_200_200/0?e=2159024400&v=beta&t=BNjtrANmqyWlKV6klKqhloEXfR8jTAtuzL9Zj0k7854" src="{{ loading }}" >
 <img  class=" imagem-do-produto"  data-hover="https://baixarmusica.me/wp-content/uploads/2020/01/CD-Sertanejo-Antigo-Sele%C3%A7%C3%A3o-As-20-Melhores-200x200.jpg" data-original="https://alfabetoauto.com.br/image/cache/catalog/product-3243/tapete-jeep-cherokee-antigo-luxo-a38985-0-1-2-200x200.jpg" src="{{ loading }}" >

Javascript

$("img").mouseover(function(){
  var divs = document.querySelectorAll('.imagem-do-produto'), i;
    for (i = 0; i < divs.length; ++i) {

      var hover =  divs[i].dataset.hover      
            divs[i].src = hover
            var src = divs[i].src
}
}).mouseout(function(){
  var divs = document.querySelectorAll('.imagem-do-produto'), i;
    for (i = 0; i < divs.length; ++i) {

      var hover =  divs[i].dataset.original      
            divs[i].src = hover
            var src = divs[i].src
}
})

Sou iniciante e nao tenho minima noção de como fazer isso, poderiam me ajudar?

1 Resposta 1

1

Basta que o seletor seja a propria class e use $(this) ao invés de pegar TODAS imagens, ficando assim:

$(".imagem-do-produto").mouseover(function(){
    //Remove imagens dos outros elementos acaso o mouseout não dispare por questões de outras situações na estrututa
    $('.imagem-do-produto').each(function () {
        var el = $(this);

        //Seta o original nos demais imgs
        el.attr('src', el.data('original'));
    });


    var $this = $(this);

    //Seta o hover na imagem atual
    $this.attr('src', $this.data('hover'));
}).mouseout(function(){
    var $this = $(this);

    //Seta o hover na imagem atual
    $this.attr('src', $this.data('original'));
});

Também não precisa de .dataset ou querySelectorAll ou de for já que esta usando jQuery mesmo, se for pra usar jQuery é melhor usar tudo que ele tem ao invés de usar só em partes

Agora se quiser fazer em JavaScript puro você poderia usar a delegação de eventos aplicando o hover diretamente no document e com matches no event.target você pode detectar aonde foi o mouseover, exemplo:

document.addEventListener('mouseover', function (event) {
    var current = event.target;

    //Se não for um elemento com o .imagem-do-produto, então ignora
    if (!current.matches('.imagem-do-produto')) {
        return;
    }

    //Remove imagens dos outros elementos para não precisar do mouseout
    var els = document.querySelectorAll('.imagem-do-produto');

    for (var i = 0; i < j; i++) {
        //Seta o original nos demais imgs
        var el = els[i];

        //Evita alterar o documento sem necessidade
        if (el.src != el.dataset.original) {
            el.src = el.dataset.original;
        }
    }

    //Seta o hover na imagem atual
    current.src = current.dataset.hover;
});

document.addEventListener('mouseout', function (event) {
    var current = event.target;

    //Se for um elemento com o .imagem-do-produto
    if (current.matches('.imagem-do-produto') && current.src != current.dataset.original) {
        current.src = current.dataset.original;
    }
});

Isto é só se jQuery não for necessário no seu projeto, o que muitas vezes não é, geralmente é só necessário se você já esta dependendo do jQuery por outros motivos.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .