html 如何构造更改剧集的代码？

siotufzp 于 2022-11-20 发布在其他

关注(0)|答案(5)|浏览(141)

基本上我有这样的代码，它是非常丑陋的，我是一个初学者在HTML，CSS和JS所以裸露与我，

<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E2.mp4';getElementById('s2').innerHTML='Season 2 Episode 2'">
Episode 2
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E3.mp4';getElementById('s2').innerHTML='Season 2 Episode 3'">
Episode 3
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E4.mp4';getElementById('s2').innerHTML='Season 2 Episode 4'">
Episode 4
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E5.mp4';getElementById('s2').innerHTML='Season 2 Episode 5'">
Episode 5
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E6.mp4';getElementById('s2').innerHTML='Season 2 Episode 6'">
Episode 6
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E7.mp4';getElementById('s2').innerHTML='Season 2 Episode 7'">
Episode 7
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E8.mp4';getElementById('s2').innerHTML='Season 2 Episode 8'">
Episode 8
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E9.mp4';getElementById('s2').innerHTML='Season 2 Episode 9'">
Episode 9
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E10.mp4';getElementById('s2').innerHTML='Season 2 Episode 10'">
Episode 10
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E11.mp4';getElementById('s2').innerHTML='Season 2 Episode 11'">
Episode 11
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E12.mp4';getElementById('s2').innerHTML='Season 2 Episode 12'">
Episode 12
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E13.mp4';getElementById('s2').innerHTML='Season 2 Episode 13'">
Episode 13
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E14.mp4';getElementById('s2').innerHTML='Season 2 Episode 14'">
Episode 14
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E15.mp4';getElementById('s2').innerHTML='Season 2 Episode 15'">
Episode 15
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E16.mp4';getElementById('s2').innerHTML='Season 2 Episode 16'">
Episode 16
</button>
<button type="button" class="buttons" onclick="document.getElementById('my-video2_html5_api').src = 'S2E17.mp4';getElementById('s2').innerHTML='Season 2 Episode 17'">
Episode 17
</button>

它看起来是如此的拥挤，从搜索中我找不到一种方法来简化JS脚本的代码？
我可以设置一个变量，让x = document等等，但这仍然会把所有东西都聚集起来

Html

来源：https://stackoverflow.com/questions/74482912/how-to-structure-code-for-changing-an-episode-of-a-series

5条答案

按热度按时间

ipakzgxi1#

将HTML更改为如下所示：

<button type="button" class="buttons episode" data-src="S2E2.mp4" data-title="Season 2 Episode 2">
Episode 2

然后，您可以使用JavaScript循环将事件侦听器分配给所有这些对象。

function showEpisode(el) {
  document.getElementById('my-video2_html5_api').src = el.dataset.src;
  document.getElementById('s2').innerHTML = el.dataset.title;
}

document.querySelectorAll(".episode.buttons").forEach(el =>
    el.addEventListener("click", e => showEpisode(e.target));

赞(0）回复(0）举报 2022-11-20

ss2ws0br2#

您可以使用下拉菜单：
第一个
正如许多人提到的，使用内联事件侦听器不是一个好主意。

赞(0）回复(0）举报 2022-11-20

c9qzyr3d3#

当然。让你的生活更简单，使用一个数据属性（或类似的）和一个通用的按钮结构。你甚至可以从一个数组的东西开始，并生成它的所有...
第一个

赞(0）回复(0）举报 2022-11-20

bvjxkvbb4#

可以使用data-(name)属性和EventListener
第一个

赞(0）回复(0）举报 2022-11-20

ca1c2owp5#

我可以使用一个纯JavaScript的方法，使用一个.map()数组方法和一个Template字符串：

document.getElementById('episodesContainer').innerHTML = episodesArray
  .map(
    (value) => `<button 
type="button" 
class="buttons" 
onclick="document.getElementById('my-video2_html5_api')
.src = 'S${value.season}E${value.episode}.mp4';getElementById('s${value.season}')
.innerHTML='$Season ${value.season} Episode ${value.episode}'"
>
Episode ${value.episode}
</button>
`
  )
  .join('');

当然，在本例中，'episodesContainer'字符串将被替换为您希望包含这些按钮的任何元素。
希望这对你有帮助。

赞(0）回复(0）举报 2022-11-20

我来回答

html 如何构造更改剧集的代码？

5条答案

相关问题

热门标签

最新问答