Javascript 如何在事件处理程序中执行map（）函数

我正在用vanilla JS构建一个律师事务所网站，它包含了大量的页面内容。我试图让一个页面在用户点击不同链接时显示不同页面的内容。 为此，我已经使用默认属性display:none编写了html，当用户单击链接时，目标链接可以动态地将该元素的CSS更改为display:block，同时确保所有其他元素都设置为display:none，以便一次显示一个。我有一个包含所有内容元素的数组，并使用splice从映射函数中删除目标元素，该函数应该将所有元素设置为display:none，我将目标元素设置为display:block。 问题是，当我在事件处理程序内使用map时，它没有执行，但当我在事件处理程序外使用它时，它确实起作用。它没有抛出任何错误，只是没有将显示设置为无

我尝试了不同的方法来获得相同的结果，例如使用forEach（）函数，但这也有类似的结果要映射。它没有抛出任何错误，但它不工作。我尝试使用display:none创建一个通用类，并使用map或forEach将该类动态添加到所有目标元素中，但这也不起作用

而且，splice不起作用，因为它一直告诉我splice不是一个函数。经过大量的尝试和错误，以及大量的研究，我能够解决这个问题的唯一方法是使用document.getElementById（）手动定位每个元素，这是非常低效的。当我使用document.getElementsByClassName（）或使用document.querySelectorAll（）时，它从未起作用

问题一：拼接不是一种功能

抓取所有元素并对其进行分解以提高效率

let contentText=document.getElementsByClassName（'content-text'）

让[移民文本、合同文本、离婚文本、债务收集文本、托管文本、删除文本、调解文本、个人伤害文本、遗嘱和信托文本]=内容文本

在事件处理程序中使用splice

错误

问题2：映射功能无法执行

抓取所有链接并对其进行分解。这样用户就可以点击这些链接，当他们点击这些链接时，它应该映射到当时没有被调用的所有链接，并且应该将css显示更改为“无”

let contentLinks = Array.from(document.getElementsByClassName('side- 
 nav-items'));

let [immigration, contracts, divorce, debtCollection, escrow, 
 expungement, mediation, personalInjury, willsAndTrusts] = 
 contentLinks;

抓取包含我们希望显示的内容的所有元素，并对它们进行分解，然后将它们添加到名为contentText的数组中

let contentText = Array.from(document.getElementsByClassName('content- 
 text'));

let [immigrationText, contractsText, divorceText, debtCollectionText, 
 escrowText, expungementText, mediationText, personalInjuryText, 
 willsAndTrustsText] = contentText;

拼接数组以排除用户当前正在调用的页面，然后映射其余页面，以便将display属性切换为none。当然，这就是事件处理函数

let immigrationEvent = () => {
 contentText.splice(0, 1);
 contentText.map((link) => link.style.display = 'none');
 immigrationText.style.display = 'block';
};

let contractsEvent = () => {
 contentText.splice(1, 1);
 contentText.map((link) => link.classList.add('content-hide'));
 contractsText.style.display = 'block';
};

调用事件处理程序函数。我举了两个例子

immigration.addEventListener('click', immigrationEvent, false);
contracts.addEventListener('click', contractsEvent, false);

问题1：预期结果是，当我使用某种类型的“全选”功能时，我希望拼接工作，但它仅在我使用

getElementById()

问题2：我希望映射功能将数组中的所有目标元素设置为“不显示”。相反，当我点击链接时，它会将元素添加到同一页面，但不会隐藏以前的元素。这会导致“TypeError:contentText.splice不是函数”：

…因为返回“类似数组的对象”（一个“live”
HTMLCollection
，它会随着DOM的变化而变化），而不是一个静态数组

要在真实的
数组中创建副本
对象，请使用
Array.from（document.getElementsByClassName（…）

对于#2，问题似乎超出了您发布的代码范围。请张贴复制该问题的代码。请注意，使用
.map
，在有效时


let immigrationEvent=（）=>{
const elts=Array.from（document.getElementsByClassName（“hideme”）；
常数[visibleElt]=elts.拼接（0,1）；
elts.map（（elt）=>elt.style.display='none'）；
visibleElt.style.display='block'；
}
document.querySelector（“按钮”）.addEventListener（“单击”，immigrationEvent，false）
1
二
三
运行
这将导致“TypeError:contentText.splice不是函数”：

…因为返回“类似数组的对象”（一个“live”
HTMLCollection
，它会随着DOM的变化而变化），而不是一个静态数组

要在真实的
数组中创建副本
对象，请使用
Array.from（document.getElementsByClassName（…）

对于#2，问题似乎超出了您发布的代码范围。请张贴复制该问题的代码。请注意，使用
.map
，在有效时


let immigrationEvent=（）=>{
const elts=Array.from（document.getElementsByClassName（“hideme”）；
常数[visibleElt]=elts.拼接（0,1）；
elts.map（（elt）=>elt.style.display='none'）；
visibleElt.style.display='block'；
}
document.querySelector（“按钮”）.addEventListener（“单击”，immigrationEvent，false）
1
二
三
运行
我终于明白了

问题一：Nickolay是正确的。我需要创建原始数组的一个实例，以便JS能够解析它

let contentText = 
 Array.from(document.getElementsByClassName('content- 
 text'));

来自的数组允许我使用映射、拼接等

问题二：多亏了Nickolay，我才注意到我的地图功能正在工作，但每次拼接运行时，它都会删除元素，页面无法读取这些更改。取而代之的是，我使用了slice，并将被切片的项目作为显示数据的项目，原始数组将保持不变，而map功能将从数组中的所有元素中删除显示。请参阅下面的代码

分解将触发事件的链接

let contentLinks = 
 Array.from(document.getElementsByClassName('side-nav- 
 items'));

let [immigration, contracts, divorce, debtCollection, 
 escrow, expungement, mediation, personalInjury, 
 willsAndTrusts] = contentLinks;

分解将在页面上显示的元素的结构

let contentText = 
 Array.from(document.getElementsByClassName('content- 
 text'));

let [immigrationText, contractsText, divorceText, 
 debtCollectionText, escrowText, expungementText, 
 mediationText, personalInjuryText, willsAndTrustsText] = 
 contentText;

应仅显示目标内容的事件之一。我们对目标代码块a进行切片
let contentText = 
 Array.from(document.getElementsByClassName('content- 
 text'));

let contentLinks = 
 Array.from(document.getElementsByClassName('side-nav- 
 items'));

let [immigration, contracts, divorce, debtCollection, 
 escrow, expungement, mediation, personalInjury, 
 willsAndTrusts] = contentLinks;

let contentText = 
 Array.from(document.getElementsByClassName('content- 
 text'));

let [immigrationText, contractsText, divorceText, 
 debtCollectionText, escrowText, expungementText, 
 mediationText, personalInjuryText, willsAndTrustsText] = 
 contentText;

 let immigrationEvent = () => {
  let targetElement = contentText.slice(0, 1);
  contentText.map((text) => text.style.display = 'none');
  targetElement[0].style.display = 'block';
  console.log(targetElement)
 };