Question

我正在Vanilla JS中建立一家律师事务所网站，其中涉及许多内容网页。我试图在用户单击不同链接时使单个页面显示内容的不同页面。我这样做的方式是，已经用默认属性display：none编写了html，并且当用户单击链接时，目标链接可以动态地将该元素的CSS更改为display：块，同时确保所有其他元素都是设置为显示：无，以便一次可以显示一个。我有一个包含所有内容元素的数组，并使用拼接从map函数中删除目标元素，该函数应该将所有元素设置为display：none，而我将目标元素设置为display：block。问题是，当我在事件处理程序中使用它时，地图未执行，但是当我在事件处理程序中使用它时，它确实起作用了。它不会引发任何错误，只是不会将显示设置为无。

我尝试了不同的方式来获得相同的结果，例如使用forEach（）函数，但这与map的结果类似。它没有引发任何错误，但是没有用。我尝试创建一个带有display：none的通用类，然后使用map或forEach将该类动态添加到所有目标元素中，但这也无法正常工作。

此外，拼接无法正常工作，因为它不断告诉我拼接不是函数。经过大量的试验和错误，以及大量的研究，我唯一能够解决此问题的方法是使用document.getElementById（）手动定位每个元素，这效率极低。当我使用document.getElementsByClassName（）或当我使用document.querySelectorAll（）

时，它永远不会起作用

问题一：拼接不是函数

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

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

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

在事件处理程序中使用拼接

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

错误

Uncaught TypeError: contentText.splice is not a function
    at HTMLLIElement.immigrationEvent

问题2：地图功能无法执行

抓取所有链接并对其进行破坏。这样，用户可以单击这些链接，并且当他们单击它们时，它应映射到当时未调用的所有链接，并且应将css显示更改为none

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：我希望地图功能将数组中的所有目标元素都设置为不显示。相反，发生的是，当我单击链接时，它会将元素添加到同一页面，但没有隐藏以前的元素

Answer 1

这将导致“ TypeError：contentText.splice不是函数”：

let contentText = document.getElementsByClassName('content-text');
contentText.splice(0, 1);

...因为getElementsByClassName返回的是一个“数组状对象”（一个“实时” HTMLCollection，它会随着DOM的变化而变化），而不是一个静态数组。

要在真实的Array对象中进行复制，请使用Array.from(document.getElementsByClassName(...))。

对于＃2，问题似乎在您发布的代码之外。请发布重现该问题的代码。请注意，使用.map有效期为is not recommended if you just want to do something for each element of a collection。

let immigrationEvent = () => {
  const elts = Array.from(document.getElementsByClassName("hideme"));
  const [visibleElt] = elts.splice(0, 1);

  elts.map((elt) => elt.style.display = 'none');
  visibleElt.style.display = 'block';
}

document.querySelector("button").addEventListener('click', immigrationEvent, false);

<div class="hideme">one</div>
<div class="hideme">two</div>
<div class="hideme">three</div>

<button>Run</button>

Answer 2

我终于明白了

问题一：尼克劳伊被发现。我需要为原始数组创建一个实例，以便JS能够解析该数组

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

来自的数组允许我使用map和splice等。

问题二：感谢Nickolay，我能够注意到我的地图功能正在运行，但是每次拼接运行时，它都在删除元素，并且页面无法读取这些更改。取而代之的是，我使用切片，并将切片的项目定位为可以显示数据的项目，原始数组将保持不变，并且地图功能将从数组中的所有元素中删除该显示。参见下面的代码

解构将触发事件的链接

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

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

2 个答案: