这段javascript代码能写得优雅吗？

Posted 2023-02-23

【中文标题】这段javascript代码能写得优雅吗？

【英文标题】：Can this javascript code be written elegantly?

【发布时间】：2020-03-28 05:11:08

【问题描述】：

由于我是 javascript 新手，谁能帮助我优雅地编写这段代码。我正在将它添加到 wordpress，所以我已经尝试了 jquery，但由于某种原因它不起作用，所以我尝试了这种可行的方法，但我不喜欢它的编写方式。

如果有人可以帮助我以更好的方式写作，那就太好了。谢谢！

var par01 = document.getElementById("tt-insights-home").getElementsByClassName("excerpt")[0].innerhtml;
var par02 = document.getElementById("tt-insights-home").getElementsByClassName("excerpt")[1].innerHTML;
var par03 = document.getElementById("tt-insights-home").getElementsByClassName("excerpt")[2].innerHTML;
var slicedPar01 = par01.slice(0, -17);
var slicedPar02 = par02.slice(0, -17);
var slicedPar03 = par03.slice(0, -17);
 document.getElementById("tt-insights-home").getElementsByClassName("excerpt")[0].innerHTML = slicedPar01;
 document.getElementById("tt-insights-home").getElementsByClassName("excerpt")[1].innerHTML = slicedPar02;
 document.getElementById("tt-insights-home").getElementsByClassName("excerpt")[2].innerHTML = slicedPar03;

【问题讨论】：

获取对元素的引用一次，而不是多次。

【参考方案1】：

我只是循环浏览摘录，然后您不会只对 3 个摘录进行硬编码：

var home = document.getElementById("tt-insights-home");
var excerpts = home.getElementsByClassName("excerpt");

for (i = 0; i < excerpts.length; i++) 
  excerpts[i].innerHTML = excerpts[i].innerHTML.slice(0, -17);

【讨论】：

太棒了！这正是我想要的。谢谢！

【参考方案2】：

可能是这样的：

var excerptElement = document.getElementById("tt-insights-home").getElementsByClassName("excerpt");

excerptElement[0].innerHTML = excerptElement[0].innerHTML.slice(0, -17);
excerptElement[1].innerHTML = excerptElement[1].innerHTML.slice(0, -17);
excerptElement[2].innerHTML = excerptElement[2].innerHTML.slice(0, -17);

【参考方案3】：

可能是主题的一个小变化 - 顺便说一句，未经测试，但看起来不错。

let insights=document.getElementById( 'tt-insights-home' )
Array.from( insights.querySelectorAll('excerpt') ).foreach( node =>
    node.textContent=node.textContent.slice(0,-17)
)