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>

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

1 个答案: