javascript - 使用 Javascript 将多个图像添加到不同的 HTML 数据链接标题

Question

我这里有这个 Javascript 可以将图像添加到不幸被锁定的网站模板中。这意味着我无法更改 html 代码。我只能在头部区域添加 CSS 代码和 Javasript。

window.onload = function() {
  let soundPacks = document.querySelector('[data-link-title="Sound Packs"]');
soundPacks.innerHTML += "<img src='https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/volume-1s-200px.svg' class='sp-logo'/>";
}

window.onload = function() {
      let soundPacks = document.querySelector('[data-link-title="Apps"]');
    soundPacks.innerHTML += "<img src='https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/volume-1s-200px.svg' class='sp-logo'/>";
    }

window.onload = function() {
      let soundPacks = document.querySelector('[data-link-title="Comments"]');
    soundPacks.innerHTML += "<img src='https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/volume-1s-200px.svg' class='sp-logo'/>";
    }

上面的脚本将图像添加到以下三个链接:

<a href="/sound-packs/" data-link-title="Sound Packs">Sound Packs</a>
<a href="/apps/" data-link-title="Apps">Apps</a>
<a href="/comments/" data-link-title="Comments">Comments</a>

到目前为止一切顺利。问题是该脚本一次仅适用于一个链接。我在这里做错了什么？也许这不是最好的解决方案？ CSS 是一种选择吗？

Answer 1

它有效，您只需将所有内容放入一个函数中即可。当您定义 window.onload 三次时，它是最后一次覆盖它。

window.onload = function() {
    let soundPacks = document.querySelector('[data-link-title="Sound Packs"]');
    soundPacks.innerHTML += "<img src='firstimage.svg' class='sp-logo'/>";

    let animals = document.querySelector('[data-link-title="Animals"]');
    animals.innerHTML += "<img src='secondimage.svg' class='sp-logo'/>";

    let zombies = document.querySelector('[data-link-title="Zombies"]');
    zombies.innerHTML += "<img src='thirdimage.svg' class='sp-logo'/>";
}

<a href="#" data-link-title="Sound Packs">Sound Packs</a><br>
<a href="#" data-link-title="Animals">Animals</a><br>
<a href="#" data-link-title="Zombies">Zombies</a><br>