Менять изображение случайно при наведении

Question

Я хочу изменить изображение случайным образом при наведении.Эффект Hover работает, но когда мышь перемещается, изображение не меняется обратно.Есть идеи?

var arr = ["020", "053", "306", "035", "930"];

function getRandomImage() {
  var index = Math.floor(Math.random() * arr.length);

  return arr[index];

}

$(function(){
$(".size-woocommerce_thumbnail").hover(function(){
    var image = getRandomImage();
    $(this).attr("srcset", function(index, attr){
        return attr.replace("070", image);
    });
    $(this).attr("src", function(index, attr){
        return attr.replace("070", image);
    });
}, function(){
    $(this).attr("srcset", function(index, attr){
        return attr.replace(image, "070");
    });
    $(this).attr("src", function(index, attr){
        return attr.replace(image, "070");
    });
});
});

Answer 1

Консоль показывает ошибку?Я предполагаю, что область действия var image = getRandomImage(); является функцией обратного вызова, выполняемой при наведении, поэтому image не определяется, когда вторая функция выполняется при наведении мыши.

Мое предложение заключается в сохранении значения imageв атрибуте data- * для чтения при наведении мыши, что-то вроде

$(".size-woocommerce_thumbnail").hover(function(){
  var $this = $(this);
  var image = getRandomImage();
  $this.attr("srcset", function(index, attr){
    return attr.replace("070", image);
  });
  $this.attr("src", function(index, attr){
    return attr.replace("070", image);
  });
  $this.data('image', image);
}, function(){
  var $this = $(this);
  var image = $this.data('image');
  $this.attr("srcset", function(index, attr){
      return attr.replace(image, "070");
  });
  $this.attr("src", function(index, attr){
      return attr.replace(image, "070");
  });
});

Дополнительный совет: вы должны сохранять значение $ (this) вместо того, чтобы выполнять его каждый раз, чтобы избежать повторного создания объекта jQuery.Функции могут быть также связаны.