Question

由于我是JS的新手，所以我正在创建此大小比较工具只是为了练习。我的HTML文件中有多个按钮（每个美国尺寸对应一个按钮），一旦单击，它们就会在我创建的一些空白<div>中返回相应的UK，EU和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>

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

2 个答案: