如何使用跨度类一次性编辑具有相同类的网页中每个跨度内的文本

Question

我正在开发一个涉及多个文本部分的项目，每个文本部分重新出现在整个网页的多个位置。由于偶尔需要更新多达 37 个不同的文本部分，并且每个部分最多会重复 11 次，因此我需要找到一种更轻松地更新文档的方法。我使用跨度是因为这些是段落内的句子。

我的想法是，如果我使用跨度类，它将与每个单独的部分相关联，并且我可以在它们出现的地方重复它们。

我假设我要做的是使用 JavaScript 来更新与该类关联的文本，这将更改网站上的文本。我看了很多东西并尝试了很多，但无法弄清楚这应该叫什么。

因为这是一个工作项目，所以我正在编造一个像电影院网站这样的场景，希望快速更新网站的各个部分。这是我尝试过但使用此场景的一段代码。

我希望这是有道理的，但这就是我尝试过的。当我更新诸如“四”、“电影”、“明天”、“爆米花”或“5.00 美元”之类的单词时，我希望它通过 span 类更新下面的相应文本。如果有人知道不同的方法，那很好。我的目标是拥有某种标签（例如类），我可以多次使用它来更新文本。我希望能够将它们更新到代码中，这样就没有下拉框或任何可见的东西。

<!-- -----I want to update the words for each span class in the script so that when I have multiple places on the page with the same class, it will update all of the words in that class.  --------- -->

<script>
function myFunction()
{
var div = document.getElementsByClassname('NumberOfMoives');
span.innerHTML = four;

var div = document.getElementsByClassname('MoviePlural');
span.innerHTML = movies;

var div = document.getElementsByClassname('Day');
span.innerHTML = tomorrow;

var div = document.getElementsByClassname('Snack');
span.innerHTML = Popcorn;

var div = document.getElementsByClassname('SnackPrice');
span.innerHTML = $5.00;
}
</script>

<!-- -----I put the words inside the spans that I want to populate from above but in reality, I shouldn't have to add them as they would be empty spans that populate the words that I need when I update the script. --------- -->

<div>
The movie theater is featuring <span class= "NumberOfMoives">four</span> <span class= "MoviePlural">movies</span> <span class= "Day">tomorrow</span>. <span class= "Snack">Popcorn</span> will be sold at the concessions at <span class= "SnackPrice">$5.00</span>. Here is the list of the show times.
<br><br>
With <span class= "NumberOfMoives">four</span> different <span id= "MoviePlural">movies</span> to choose from, you can't turn it down.  We look forward to seeing you <span class= "Day">tomorrow</span>.
</div>

Answer 1

根据我从你的话中了解到的，这可能对你有用：

var spans = document.querySelectorAll('NumberOfMoives');
spans.forEach((span)=> {
     span.innerHTML = 'four';
});