如何在单个 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

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

const arr = []

// add variables to array

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

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

Answer 2

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

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

Jquery

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

选择ID以a000开头的元素

Answer 3

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

Select 元素按不同的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);
    }
});

将相同的 class 添加到所有三个或更多元素。

// 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);
   }
});

Answer 4

使用的标记并不完全清楚，但我假设您有一个带有一些输入元素的表单（因为 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>

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

将focusout event listener is delegated（blur不冒泡，不能用简单的方式委托）给表单，里面包含了所有的输入元素。这样您就可以编辑和更新页面的 HTML，无论需要删除或添加多少输入，您都不必对存储值的 JavaScript 进行任何更改。

如果您的标记不同并且您无法应用代码段，请将您的标记示例添加到问题中。

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

How to use a call multiple varibles in a sinlge if statement?

html

javascript

variables

innerhtml