如何在单个 if 语句中调用多个变量？

Question

我有多个这样的变量

var a0001 = document.getElementById("a0001");
var a0002 = document.getElementById("a0002");
var a0003 = document.getElementById("a0003");

我用于

a0001.blur= function() {
  localStorage.setItem("a0001", a0001.innerHTML);
};
a0002.blur = function() {
  localStorage.setItem("a0002", a0002.innerHTML);
};
a0003.blur = function() {
  localStorage.setItem("a0003", a0003.innerHTML);
};

我的问题是我将使用 100 个变量，但我不知道如何放置“循环占位符”来处理此类变量（*** 表示将循环抛出变量并解析的占位符他们出去）

***.blur= function() {
  localStorage.setItem("***", ***.innerHTML);
};

我显然是新手，这是一个单页本地存储项目，不确定我是否没有使用正确的关键字来查找我正在寻找的文档，或者？因此，我们将不胜感激。

编辑；下面添加了标记

<table>
  <thead>
    <tr>
      <th id="a0001" contenteditable='true' spellcheck="false">ID
      </th><th id="a0002" contenteditable='true' spellcheck="false">First Name
      </th><th id="a0003" contenteditable='true' spellcheck="false">Last Name
  </th></tr></thead>
</table>

Answer 1

使用的标记并不完全清楚，但我假设您有一个带有一些输入元素的表单（因为blur 仅在表单控件和window 对象上默认触发）。

尽管有真正的 HTML，您还是做了很多不必要的工作。你有很多元素，你需要将它们作为一组元素来处理，而不是一个一个地处理。使用id 来识别一个组很容易出错，也很难维护，最重要的是，每个id 的一个全局变量被创建，它用不需要的变量淹没了非常拥挤的对象。此外，不需要数百个事件侦听器，您可以使用单个侦听器，它可以处理所有元素。下面是一个简单的代码，展示了如何处理一组元素：

const form = document.querySelector('#list'),
  storingList = new Map(),
  inputs = form.querySelectorAll('.to-storage');

inputs.forEach((input, idx) => {
  const itemName = 'a' + (idx.toString()).padStart(4, '0');
  storingList.set(input, itemName);
});

form.addEventListener('focusout', e => {
  if (e.target.className !== 'to-storage') {return;} // Quit, not a target element blurred
  const itemName = storingList.get(e.target),
    value = e.target.value;
  console.log(itemName, value);
  // localStorage.setItem(itemName, value); // Commented out to not populate localStorage of SO visitors
});

<form id="list">
  Item 1 <input class="to-storage"><br>
  Item 2 <input class="to-storage"><br>
  Item 3 <input class="to-storage"><br>
  Item 4 <input class="to-storage"><br>
  Item 5 <input class="to-storage"><br>
  Item 6 <input class="to-storage"><br>
  Item 7 <input>
</form>

在sn-p中，所有值存储在localStorage中的输入，都归入一个名为to-storage的类。分组输入和标识符被收集到Map 对象中，因此它们很容易在事件处理程序中识别（Map 对象可以将元素作为键）。请注意动态项目名称创建，它会自动处理正在运行的索引。

focusout 事件侦听器是delegated（blur 不会冒泡，不能以简单的方式委托）到包含所有输入元素的表单。这样您就可以编辑和更新页面的 HTML，无论需要删除或添加多少输入，您都无需对存储值的 JavaScript 进行任何更改。

如果您的标记不同并且您无法应用 sn-p，请在问题中添加您的标记示例。

Answer 2

您可以将变量放在const arr = [] 之类的数组中，然后循环遍历每个变量。整个事情看起来像：

const arr = []

// add variables to array

arr.forEach(a => {
  a.blur = function() {
    localStorage.setItem(a.key, a.innerHTML);
  }
})

您可能希望为变量定义一个唯一标识符，例如 key 或其他东西

Answer 3

不需要创建多个变量！ 原生JS

var elements = document.querySelectorAll('[id^=a000]');

jQuery

$('[id^="a000"]')

选择 ID 以 a000 开头的元素

Answer 4

我会建议两种方法来解决这个问题。

1. 通过不同的 id 选择元素并存储在数组中 例如：

// Add more id of elements on this array
let selectableElementsId = ['a0001', 'a0002', 'a0003'];

selectableElementsId.forEach(elementId => {
    let element = document.querySelector(`#${elementId}`);
    if(!element) return;
    element.blur = function(){
       localStorage.setItem(element.id, element.innerHTML);
    }
});

1. 为所有三个或更多元素添加相同的类。

// Replace yourClassName with class name of elements
let selectedElements = Array.from(document.querySelectorAll(".yourClassName"));

selectedElements.forEach(element => {
   element.blur = function(){
       localStorage.setItem(element.id || selectedElements.indexOf(element), element.innerHTML);
   }
});