在对象属性上迭代 addEventListener答案

【问题标题】：Iterate addEventListener over object properties在对象属性上迭代 addEventListener
【发布时间】：2018-03-12 17:10:13
【问题描述】：

我正在尝试向多个 DOM 元素添加事件侦听器，因此我创建了一个包含所有这些元素的对象。现在我想弄清楚如何循环这个对象，这样我就可以向所有对象添加相同的事件监听器。我总是可以做到这一点，但我想让事情更紧凑和简洁。我尝试使用 for..in 循环，但出现错误。

我的代码：

var realID;

function getFormId(){

var formID = document.querySelector("div[id^=PC]").id;
var actualID = formID.split("");
realID = actualID[0] + actualID[1] + actualID[2] + actualID[3] + actualID[4] + actualID[5];

} getFormId(realID);

var boxes = {
  titleBox: document.getElementById(realID + "_DonationCapture1_cboTitle"),
  firstNameBox: document.getElementById(realID + "_DonationCapture1_txtFirstName"),
  middleNameBox: document.getElementById(realID + "_DonationCapture1_txtMiddleName"),
  lastNameBox: document.getElementById(realID + "_DonationCapture1_txtLastName"),
  country: document.getElementById(realID + "_DonationCapture1_AddressCtl_dd_Country"),
  address: document.getElementById(realID + "_DonationCapture1_AddressCtl_tb_AddressLine"),
  city: document.getElementById(realID + "_DonationCapture1_AddressCtl_tb_CityUS"),
  state: document.getElementById(realID + "_DonationCapture1_AddressCtl_dd_StateUS"),
  zip: document.getElementById(realID + "_DonationCapture1_AddressCtl_tb_ZipUS"),
  phone: document.getElementById(realID + "_DonationCapture1_txtPhone"),
  email: document.getElementById(realID + "_DonationCapture1_txtEmail"),
  cardName: document.getElementById(realID + "_DonationCapture1_txtCardholder"),
  cardNumber: document.getElementById(realID + "_DonationCapture1_txtCardNumber"),
  cardType: document.getElementById(realID + "_DonationCapture1_cboCardType"),
  cardExpirationOne: document.getElementById(realID + "_DonationCapture1_cboMonth"),
  cardExpirationTwo: document.getElementById(realID + "_DonationCapture1_cboYear"),
  cardSecurity: document.getElementById(realID + "_DonationCapture1_txtCSC")
}

for ( var box in boxes ){
  box.addEventListener("click", function(){
    if ( monthlyButton.classList.contains("blue-button") || yearlyButton.classList.contains("blue-button") ){

    } else {
      monthlyButton.classList.remove("lite-grey-button");
      monthlyButton.classList.add("red-button");

      yearlyButton.classList.remove("lite-grey-button");
      yearlyButton.classList.add("red-button");
    }
  }, false);
}

【问题讨论】：

错误是什么？
For..在循环中，框是索引而不是值。你应该使用 box[box]
@PrashanthKR 非常有帮助，谢谢！！修复了我的问题。

标签： javascript loops object dom

【解决方案1】：

更改 for 循环以引用值而不是框对象中的键..

for (var box in boxes) {
    boxes[box].addEventListener("click", function() {

      if (monthlyButton.classList.contains("blue-button") || earlyButton.classList.contains("blue-button") ) {

    } else {
      monthlyButton.classList.remove("lite-grey-button");
      monthlyButton.classList.add("red-button");

      yearlyButton.classList.remove("lite-grey-button");
      yearlyButton.classList.add("red-button");
    }   }, false); }

【讨论】：