我可以将这些功能组合到一个简化的功能中吗？

Question

我正在单击几个不同的实例，在单击时交换背景图像，并且仅针对991px及以上的屏幕。我可以创建一个简化的功能还是使它更简洁/更好？

const mediaQuery = window.matchMedia('(min-width: 991px)')
const infraTab1 = document.querySelector(".content1")
const infraTab2 = document.querySelector(".content2")
const infraTab3 = document.querySelector(".content3")
const infraTab4 = document.querySelector(".content4")
const infrastructure = document.querySelector(".infrastructure")

if (mediaQuery.matches) {

  infraTab1.addEventListener("click", function () {
    infrastructure.style.backgroundImage = "url(img1.jpg)";
  })
}
if (mediaQuery.matches) {
  infraTab2.addEventListener("click", function () {
    infrastructure.style.backgroundImage = "url(img2.jpg)";
  })
}
if (mediaQuery.matches) {
  infraTab3.addEventListener("click", function () {
    infrastructure.style.backgroundImage = "url(img3.jpg)";
  })
}
if (mediaQuery.matches) {
  infraTab4.addEventListener("click", function () {
    infrastructure.style.backgroundImage = "url(img4.jpg)";
  })
}

Answer 1

也许这是您想要的解决方案

const mediaQuery = window.matchMedia('(min-width: 991px)')
const infraTab1 = document.querySelector(".content1")
const infraTab2 = document.querySelector(".content2")
const infraTab3 = document.querySelector(".content3")
const infraTab4 = document.querySelector(".content4")
const infrastructure = document.querySelector(".infrastructure")

if (mediaQuery.matches) {
    setEventOn(infraTab1, infrastructure,  "img1.jpg");
    setEventOn(infraTab2, infrastructure,  "img2.jpg");
    setEventOn(infraTab3, infrastructure,  "img3.jpg");
    setEventOn(infraTab4, infrastructure,  "img4.jpg");
}

function setEventOn(element, infra,  img){
    infraTab4.addEventListener("click", function () {
        infra.style.backgroundImage = "url("+img+")";
    })
}