如何在多个HTML按钮中使单个功能工作？

Question

我正在为练习创建这个大小比较工具，因为我是JS的新手。我的HTML文件中有多个按钮（每个美国大小一个），一旦点击，应该返回我创建的一些空的<div>中的相应英国，欧盟和CM大小。

我实际上设法通过给每个按钮一个id并为每个按钮编写一个函数来实现它，但这是一个非常低效和重复的代码，我想了解如何才能使它更有效。

const sizeAll = [
   {  US: 4,     UK: 3.5,   EU: 36,     CM: 22    },
   {  US: 4.5,   UK: 4,     EU: 36.5,   CM: 22.5  },
   //other size objects removed from here
   {  US: 14,    UK: 13,    EU: 48.5,   CM: 32    }   
];  


let sizeFour = document.getElementById('Four');
let sizeFourPointFive = document.getElementById('FourPointFive');

//all the other sizes removed from here

let sizeFourteen = document.getElementById('Fourteen');

let us = document.getElementById('current');
//uk
let uk = document.getElementById('uk');
let ukNumber = document.getElementById('ukNumber');
//eu
let eu = document.getElementById('eu');
let euNumber = document.getElementById('euNumber');
//cm
let cm = document.getElementById('cm');
let cmNumber = document.getElementById('cmNumber');


const comparison4 = () => {
   us.textContent = 'US' + ' ' + sizeFour.value + ':';
   uk.textContent = 'UK';
   ukNumber.textContent = sizeAll[0].UK;
   eu.textContent = 'EU';
   euNumber.textContent = sizeAll[0].EU;
   cm.textContent = 'CM';
   cmNumber.textContent = sizeAll[0].CM;
};

sizeFour.addEventListener('click', comparison4);

<div class="buttons">
       <button id='Four' value="4">4</button>
       <button id='FourPointFive' value="4.5">4.5</button>
<!--I took out all the other buttons just for code exhibit purpose-->      
       <button id='Fourteen' value="14">14</button>
</div>

<div>
       <h2 id="current"></h2>
           <h3 id="uk"></h3>
               <p id="ukNumber"></p>
           <h3 id="eu"></h3>
               <p id="euNumber"></p>
           <h3 id="cm"></h3>
               <p id="cmNumber"></p>          
</div>

如果我在我的JS文件中重复这个过程（comparison45()，comparison5()等）21次（我的按钮数量）一切正常，但为了避免重复这个过程，我怎样才能使这个代码高效？

Answer 1

为所有按钮提供一个类，以便您可以循环它们并分配相同的侦听器函数。该函数可以使用e.target来获取单击的按钮。

将sizeAll更改为其键是大小按钮的ID的对象。

const comparison = (e) => {
  var size = sizeAll[e.target.id];
  us.textContent = 'US' + ' ' + e.target.value + ':';
  uk.textContent = 'UK';
  ukNumber.textContent = size.UK;
  eu.textContent = 'EU';
  euNumber.textContent = size.EU;
  cm.textContent = 'CM';
  cmNumber.textContent = size.CM;
};

document.querySelectorAll(".size").forEach(el => el.addEventListener('click', comparison));

let us = document.getElementById('current');
//uk
let uk = document.getElementById('uk');
let ukNumber = document.getElementById('ukNumber');
//eu
let eu = document.getElementById('eu');
let euNumber = document.getElementById('euNumber');
//cm
let cm = document.getElementById('cm');
let cmNumber = document.getElementById('cmNumber');

const sizeAll = {
  Four: {
    US: 4,
    UK: 3.5,
    EU: 36,
    CM: 22
  },
  FourPointFive: {
    US: 4.5,
    UK: 4,
    EU: 36.5,
    CM: 22.5
  },
  //other size objects removed from here
  Fourteen: {
    US: 14,
    UK: 13,
    EU: 48.5,
    CM: 32
  }
};

<div class="buttons">
  <button id='Four' class="size" value="4">4</button>
  <button id='FourPointFive' class="size" value="4.5">4.5</button>
  <button id='Fourteen' class="size" value="14">14</button>
</div>

<div>
  <h2 id="current"></h2>
  <h3 id="uk"></h3>
  <p id="ukNumber"></p>
  <h3 id="eu"></h3>
  <p id="euNumber"></p>
  <h3 id="cm"></h3>
  <p id="cmNumber"></p>
</div>

Answer 2

关于这个IMO最简单的方法是利用传递给event回调的addEventListener参数 - 特别是event.target，它是对点击触发事件的按钮的引用。如果这样做，则不需要为代码中的每个按钮保留显式变量引用。像这样的东西：

const sizeAll = [{
  US: 4,
  UK: 3.5,
  EU: 36,
  CM: 22
}, {
  US: 4.5,
  UK: 4,
  EU: 36.5,
  CM: 22.5
}, {
  US: 14,
  UK: 13,
  EU: 48.5,
  CM: 32
}];

let us = document.getElementById('current');
let uk = document.getElementById('uk');
let ukNumber = document.getElementById('ukNumber');
let eu = document.getElementById('eu');
let euNumber = document.getElementById('euNumber');
let cm = document.getElementById('cm');
let cmNumber = document.getElementById('cmNumber');

//Take advantage of the event argument that the browser passes to the addEventListener callback
const comparison = (e) => {
  //e.target.value is a reference to the button that was clicked to trigger the event
  const [sizeEl] = sizeAll.filter(size => size.US == e.target.value);
  //As a side note: there may be a better way to structure your data so you dont have to filter to find the correct array object - but for now this works

  us.textContent = 'US' + ' ' + sizeEl.US + ':';
  uk.textContent = 'UK';
  ukNumber.textContent = sizeEl.UK;
  eu.textContent = 'EU';
  euNumber.textContent = sizeEl.EU;
  cm.textContent = 'CM';
  cmNumber.textContent = sizeEl.CM;
};

document.querySelector('#Four').addEventListener('click', comparison);
document.querySelector('#FourPointFive').addEventListener('click', comparison);
document.querySelector('#Fourteen').addEventListener('click', comparison);

<div class="buttons">
  <button id='Four' value="4">4</button>
  <button id='FourPointFive' value="4.5">4.5</button>
  <!--I took out all the other buttons just for code exhibit purpose-->
  <button id='Fourteen' value="14">14</button>
</div>

<div>
  <h2 id="current"></h2>
  <h3 id="uk"></h3>
  <p id="ukNumber"></p>
  <h3 id="eu"></h3>
  <p id="euNumber"></p>
  <h3 id="cm"></h3>
  <p id="cmNumber"></p>
</div>