Foreach with querySelectAll() mouseover src [one image at a time]

Question

When I move the mouse I want it to change the background image of only one image instead of all at once

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

I’m a beginner and I have no idea how to do this, could help me?

Answer 1

Just make the selector the class itself and use $(this) instead of taking ALL images, thus:

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

You also don’t need .dataset or querySelectorAll or of for since it is using jQuery itself, if it is to use jQuery it is better to use everything it has instead of using only in parts

Now if you want to do it in pure Javascript you could use the delegation of events by applying Hover directly to document and with matches in the event.target you can detect where the mouseover, example:

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

This is only if jQuery is not required in your project, which is often not, it is usually only necessary if you are already depending on jQuery for other reasons.