Объеденить код в массив
Имеется код, который меняет картинку 1(spacebar42) меняется яндекс и гугл при нажатии на клавишу "пробел".
Помимо картинки 1(spacebar42) есть еще и 2(spacebar13)... Работает по такому же принципу, но меняется уже при нажатии на другие клавиши.
В целом код получается достаточно большой, поэтому хотелось бы его объеденить в какой-то массив, но любые попытки приводят к тому, что код просто перестает работать...
Просто, помимо катинки 1,2 есть еще и 3, 4,5...20, которые тоже должны менятся (но я их сюда не добавил по понятным причинам - код был бы гигантский).
Как можно создать массив из этого огромного javascript-кода, чтобы уменьшить размер скрипта?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" id="spacebar42" />
<img src="image2" id="spacebar13">
<img src="image3" id="spacebar55">
<script type="text/javascript">
$(function() {
var myRealUrl = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png";
$("body").on("keydown", function(e) {
if (e.which == 32) {
$("#spacebar42").attr("src", "https://yastatic.net/s3/home/logos/citylogos/face_mask/ru.png");
console.log('pressed');
}
});
$("body").keyup(function(e) {
if (e.which == 32) {
$("#spacebar42").attr("src", myRealUrl);
console.log('released');
}
});
});
$(function() {
var myRealUrl = "image2";
$("body").on("keydown", function(e) {
if (e.which == 35) {
$("#spacebar13").attr("src", "image3");
console.log('pressed');
}
});
$("body").keyup(function(e) {
if (e.which == 35) {
$("#spacebar13").attr("src", myRealUrl);
console.log('released');
}
});
});
</script>