Question

是否可以通过使用数组简化以下代码？例如，当单击HTML中的按钮1（索引为0）时，是否可以将其用于获取另一个数组中索引0处的值？

function f1() {
  document.getElementById("dis").innerHTML = "JoeMae";
}

function f2() {
  document.getElementById("dis").innerHTML = "TanakaMae";
}

function f3() {
  document.getElementById("dis").innerHTML = "James";
}

function f4() {
  document.getElementById("dis").innerHTML = "Deus";
}

<button onclick="f1()">no.1</button>
<button onclick="f2()">no.2</button>
<button onclick="f3()">no.3</button>
<button onclick="f4()">no.4</button>
<p id="dis"></p>

Answer 1

您可以简化而不使用数组：

<button onclick="f('JoeMae')">no.1</button>
<button onclick="f('TanakaMae')">no.2</button>
<button onclick="f('James')">no.3</button>
<button onclick="f('Deus')">no.4</button>
<p id="dis"></p>

function f(str) {
  document.getElementById("dis").innerHTML = str;
}

Answer 2

使用另一个数组，使该数组的第n个索引对应于第n个按钮：

const texts = [
  "JoeMae",
  "TanakaMae",
  "James",
  "Deus"
];
const dis = document.getElementById("dis");
document.querySelectorAll('button').forEach((button, i) => {
  button.addEventListener('click', () => {
    dis.textContent = texts[i];
  });
});

<button>no.1</button>
<button>no.2</button>
<button>no.3</button>
<button>no.4</button>
<p id="dis"></p>

请注意，除非您有意插入HTML标记，否则可能应该使用textContent，而不是innerHTML。（textContent更快，更安全）

Answer 3

这里是一个更简洁，更灵活的示例，说明了如何实现这种功能。

如果您有很多这样的渲染功能，我建议您使用它的库/框架。

double

const buttonDefinitions = [
    {title: 'no.1', name: 'Monica'},
    {title: 'no.2', name: 'Erica'},
    {title: 'no.3', name: 'Rita'},
    {title: 'no.4', name: 'Tina'}
];


const buttonContainer = document.getElementById('buttonContainer');
const resultContainer = document.getElementById('resultContainer');

for (const buttonDefinition of buttonDefinitions) {
    const button = document.createElement('button');
    button.innerHTML = buttonDefinition.title;
    button.onclick = () => {
        resultContainer.innerHTML = buttonDefinition.name;
    };
    buttonContainer.appendChild(button);
}

Answer 4

您可以将元素传递给函数并访问元素的数据属性在下面的示例中，我要传递数据名称

function f(element) {
  document.getElementById("dis").innerHTML = element.dataset["name"];
}

<button data-name="JoeMae" onclick="f(this)">no.1</button>
<button data-name="TanakaMae" onclick="f(this)">no.2</button>
<button data-name="James" onclick="f(this)">no.3</button>
<button data-name="Deus" onclick="f(this)">no.4</button>
<p id="dis"></p>

Answer 5

这是香草JS的方法。我使用dataset API将每个按钮连接到其数据，然后使用一个处理程序来检索和显示此数据。

"use strict";
function byId(id){return document.getElementById(id)}
function newEl(tag){return document.createElement(tag)}

window.addEventListener('load', onLoaded, false);
function onLoaded(evt)
{
	var responseArray = ['JoeMae', 'TanakaMae', 'James', 'Deus'];
	responseArray.forEach( function(arrElem, elemIndex, arr)
							{
								var btn = newEl('button');
								btn.textContent = `no.${elemIndex+1}`;
								btn.dataset.response = arrElem;
								btn.addEventListener('click', onClick, false);
								document.body.appendChild(btn);
							}
						);
						
	function onClick(evt)
	{
		let text = this.dataset.response;
		byId('dis').textContent = text;
	}
}

<p id='dis'></p>

有没有一种方法可以简化使用数组的代码？

5 个答案: