为导航菜单中的每个链接替换图像的src。

Question

我有一堵巨大的代码墙，它将页面上img的src替换为指定的，用于导航菜单中的每个链接。

但是..。这是一堵巨大的代码墙，为每个ID标记调用操作。一定有更好的方法，对吧？我是不是遗漏了什么？是否有一种方法可以让我有一个公式解析哪个ID被点击，并使用ID，比如"ID.png“(用所讨论的ID替换ID )？

$(document).ready(function(){



var _c = new Date().getTime();



$('#current').click(function(){$('#diary').attr('src', 'https://mywebsite.com/diary/diary.png?c='+_c);});
$('#diary').attr('src', 'https://mywebsite.com/diary/diary.png?c='+_c);



$('#20220422').click(function(){$('#diary').attr('src', 'https://mywebsite.com/diary/stored/20220422.png?c='+_c);});
$('#20220423').click(function(){$('#diary').attr('src', 'https://mywebsite.com/diary/stored/20220423.png?c='+_c);});
$('#20220424').click(function(){$('#diary').attr('src', 'https://mywebsite.com/diary/stored/20220424.png?c='+_c);});
$('#20220425').click(function(){$('#diary').attr('src', 'https://mywebsite.com/diary/stored/20220425.png?c='+_c);});
$('#20220426').click(function(){$('#diary').attr('src', 'https://mywebsite.com/diary/stored/20220426.png?c='+_c);});
$('#20220427').click(function(){$('#diary').attr('src', 'https://mywebsite.com/diary/stored/20220427.png?c='+_c);});
$('#20220428').click(function(){$('#diary').attr('src', 'https://mywebsite.com/diary/stored/20220428.png?c='+_c);});
$('#20220429').click(function(){$('#diary').attr('src', 'https://mywebsite.com/diary/stored/20220429.png?c='+_c);});
$('#20220430').click(function(){$('#diary').attr('src', 'https://mywebsite.com/diary/stored/20220430.png?c='+_c);});



})

Answer 1

您可以根据日期生成一些util方法。

function dairyAttr(date) {
  return function () {
    $("#diary").attr(
      "src",
      `https://mywebsite.com/diary/stored/${date}.png?c=` + _c
    );
  };
}

function setClick(date) {
  $(`#${date}`).click(dairyAttr(date));
}

const dates = ["20220422", "20220423"];

dates.forEach(setClick);