时间戳

首页 > 解决方案 > 使用 Javascript 将多个图像添加到不同的 HTML 数据链接标题

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

问题描述

我在这里有这个 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是一种选择吗？

标签： javascripthtmlcss

解决方案

它有效，您只需将所有内容放入一个函数中。当您定义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>

推荐阅读