javascript - 如何使单个功能在多个 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 次（我的按钮数）一切正常，但是为了避免重复这个过程，我怎样才能使这个代码高效？

标签： javascriptarraysdombutton

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>