использование JQuery для замены нескольких изображений в панели навигации

Question

У меня есть вещь navbar здесь , внизу.

Обычно, когда пользователь наводит курсор на изображение, ему следует изменить имя файла с xyz.png на xyz-hover.png, показывая новое изображение. С прохладным исчезать.

Кроме того, каждое изображение над изображением меняется на одно и то же.

Кто-нибудь знает способ обойти это?

    <script type="text/javascript">

$(document).ready(function() {
      // Change the image of hoverable images
      var openPng = $(".fadeim").attr("src");
      var closedPng = openPng.replace(".png", "-hover.png");


$(".fadeim").hover(function() { 
            $(this).stop(true, true).fadeOut(700, function() {
                  $(this).attr("src", closedPng).fadeIn(700);
            });


      }, function() {

            $(this).stop(true, true).fadeOut(700, function() {
                  $(this).attr("src", openPng).fadeIn(700);         
            });
      });
});


</script>

Answer 1

переменные openpng и closepng должны быть определены в каждом цикле.

$(document).ready(function() {
      // Change the image of hoverable images

$(".fadeim").each(function(){
var openPng = $(this).attr("src");
var closedPng = openPng.replace(".png", "-hover.png");
$(this).hover(function() { 
            $(this).stop(true, true).fadeOut(700, function() {
                  $(this).attr("src", closedPng).fadeIn(700);
            });


      }, function() {

            $(this).stop(true, true).fadeOut(700, function() {
                  $(this).attr("src", openPng).fadeIn(700);         
            });
      });
})
});