Как правильно написать вот этот код JQuery?

Question

[myskypesla]

Привет я только постигаю азы JavaScript., подскажите как правильно организовать данный код?

Вот ссылка на jsfiddle

Код рабочий, но мне кажется что его можно сильно упростить, помогите разобраться?

Смысл кода такой: есть 10 разных картинок, при наведении на каждую, должна появлятся на её месте другая картинка из папки img, в момент когда hover закончился, возвращаем первоначальный src.

Answer 1

[Дмитрий Ковальский]

Копипастный код и строковые константы. Что можно переделать на мой взгляд:
1) Выделить критерии по которым подменяется изображение при наведении."Другая" это не критерий. В противном случае придется использовать генератор случайных чисел. На данный момент я вижу хардкодед ссылки, которые ничего не говорят о ваших намерениях.
2) Исходя из пункта 1 переписать код примерно так :

var defaultSrc = 'http://placehold.it/100x50'
('img').hover(function() {
    someLogicToSwitchSrc();
    }, function() {
      $(this).attr('src', defaultSrc);
    }
  );

Если defaultSrc разнится на разных картинках, я бы завел пару массивов - начальные значения и список потенциальных замен. Ну и, например, в data-атрибутах хранил бы индексы картинок в этом массиве.
Вроде:

('img').hover(function() {
    someLogicToSwitchSrc();
    }, function() {
       var imgId = $(this).data('id');
      $(this).attr('src', defaultSrc[imgId]);
    }
  );

Comments

[myskypesla]

Спасибо, логика понятна, буду работать над собой )

Answer 2

[Константин Громов]

https://jsfiddle.net/b513qwqL/5 html тоже изменился.