有没有办法让我重用 JavaScript 函数而无需复制/粘贴它？

Question

我已经编写了一个 JavaScript 函数，并且需要在一个页面中使用完全相同的代码至少 6 次。每次复制/粘贴该函数并切换 ID 会变得重复并占用大量空间，因此我想知道是否有一种方法可以为我需要的每个实例使用一个函数。试图找到解决方案很困难，因为该函数同时影响三个不同的元素，因此如果有人知道如何简化代码，那就太棒了。

我知道这里的代码是无效的，但这是我正在尝试做的事情的一个例子，加上我一直在研究的jfiddle，因为我不反对这个网站的格式。第一个按预期工作，我不知道如何为其他两个示例复制该代码。

var div1 = document.getElementById("image1");
var div2 = document.getElementById("image2");
const button = document.getElementById("button");


function myFunction() {
  if (button.innerHTML == ("see original")) {
    div2.style.animation = "show 1s 1 forwards";
    div1.style.animation = "shuffle 1s 1 forwards";
    button.style.animation = "nobtn1 1.75s 1 linear";
    button.innerHTML = "see official";
    div1.style.zIndex = "0";
    div2.style.zIndex = "1";
  } else {
    div1.style.animation = "show 1s 1 forwards";
    div2.style.animation = "shuffle 1s 1 forwards";
    button.style.animation = "nobtn2 2s 1 linear";
    button.innerHTML = "see original";
    div2.style.zIndex = "0";
    div1.style.zIndex = "1";
  }
}

<div class="thumbnail">
  <div class="roster">

    <div class="colourbox"></div>
    <img id="image1" src="#">
    <img id="image2" src="#">
    <div id="button" onclick="myFunction()">see original</div>

  </div>
</div>
<div class="thumbnail">
  <div class="roster">

    <div class="colourbox"></div>
    <img id="image1" src="#">
    <img id="image2" src="#">
    <div id="button" onclick="myFunction()">see original</div>

  </div>
</div>
<div class="thumbnail">
  <div class="roster">

    <div class="colourbox"></div>
    <img id="image1" src="#">
    <img id="image2" src="#">
    <div id="button" onclick="myFunction()">see original</div>

  </div>
</div>

https://jsfiddle.net/consumed_by_m0ss/vxdf6puh/208/

还需要注意的是，我也尝试过多种不同的方式将 ID 切换为类，正如我看到的其他一些帖子中所建议的那样，但这总是会导致错误，使代码无法定义动画属性或读取innerHTML

Answer 1

id

属性在文档中必须是唯一的。相反，使用类来标识您的元素。

<div class="thumbnail">
  <div class="roster">
    <div class="colourbox"></div>
    <img class="image1" src="#">
    <img class="image2" src="#">
    <div class="button" data-type="official">see original</div>
  </div>
</div>

然后将事件侦听器附加到您的 button 元素，以从事件目标中找到适当的父级和同级元素

const myFunction = ({ target: button }) => {
  const roster = btn.closest('.roster');
  const div1 = btn.querySelector('.image1');
  const div2 = btn.querySelector('.image2');

  if (btn.dataset.type === 'official') {
    div2.style.animation = 'show 1s 1 forwards';
    div1.style.animation = 'shuffle 1s 1 forwards';
    button.style.animation = 'nobtn1 1.75s 1 linear';
    button.textContent = 'see official';
    button.dataset.type = 'original';
    div1.style.zIndex = '0';
    div2.style.zIndex = '1';
  } else {
    div1.style.animation = 'show 1s 1 forwards';
    div2.style.animation = 'shuffle 1s 1 forwards';
    button.style.animation = 'nobtn2 2s 1 linear';
    button.textContent = 'see original';
    button.dataset.type = 'official';
    div2.style.zIndex = '0';
    div1.style.zIndex = '1';
  }
};

document.querySelectorAll('.roster > .button').forEach((btn) => {
  btn.addEventListener('click', myFunction);
});