javascript - 如何在 Javascript 中将 Action 转换为函数

Question

我在一个页面(worpress 网站)上有很多翻译要做，我想使用 javascript 来完成，而不是使用 php 代码。因此，我需要执行许多类似的操作，其中我使用 getElementsByClassName 选择一个类，该类返回一个 HTML 集合，然后将其转换为数组，然后使用 forEach 函数更改 textContent。足够简单并且有效:

let verMas = document.getElementsByClassName('read-more-button');
let verMasA = Array.from(verMas);

verMasA.forEach(function(verMasL){
verMasL.textContent = 'Ver mas...';
});

问题是我有几个这样的小翻译来做所有基本上相同的 Action ，所以明显的解决方案是将上面的内容变成一个函数，但我没有得到正确的结果。这就是我所做的:

function traducirArray(a,cla,b,c,d) {
 let a = document.getElementsByClassName(cla);
 let b = Array.from(a);  

 b.forEach(function(c){
 c.textContent = d;
 return d;
 });  

}

traducirArray(verMas, 'read-more-button',verMasA,verMasL,'Ver más');  

最后我调用了该函数，但它不起作用。我做错了什么？

Answer 1

虽然你是shadowing您的参数(正如 VLAZ 所指出的)，实际上您甚至不需要这些参数。

看来完成所需任务所需的只是类名称和新文本内容。

像这样的东西就足够了:

function traducirArray(className, textContent) {
  let verMas = document.getElementsByClassName(className);
  let verMasA = Array.from(verMas);
  verMasA.forEach(function(verMasL){
    verMasL.textContent = textContent;
  });
}

traducirArray("read-more", "Hello world!");

<div class="read-more"></div>
<div class="read-more"></div>
<div class="read-more"></div>

或者，您可以使用 querySelectorAll() 选择您的项目。返回类型 ( NodeList ) 不需要您在使用 forEach() 之前转换为数组。

function traducirArray(className, textContent) {
  document.querySelectorAll(`.${className}`).forEach(el => el.textContent = textContent);
}

traducirArray("read-more", "Hello world!");

<div class="read-more"></div>
<div class="read-more"></div>
<div class="read-more"></div>