多次使用同一个类插入文本内容

如何解决多次使用同一个类插入文本内容

我目前正在尝试使用单个类为多个 div 插入根据图像验证而变化的文本内容。任何帮助表示赞赏！

HTML

...
<div id="trophies"><img id="trophyimage" src="//user/trophies/A.png" height="100" width="100">
<span id="text-content" class="spaner"></span></div>
<div id="trophies"><img id="trophyimage" src="//user/trophies/B.png" height="100" width="100">
<span id="text-content" class="spaner"></span></div>
<div id="trophies"><img id="trophyimage" src="//user/trophies/C.png" height="100" width="100">
<span id="text-content" class="spaner"></span></div>

现在使用下一个 Javascript 插入文本内容，但它只在每个“.spanner”类中插入一次，而不是在其他类中。

JavaScript

 var trophy = document.getElementById("trophyimage");
 if(trophy.src == "...//user/trophies/A.png"){
   var x = document.getElementsByClassName("spaner")[0]; 
   x.textContent = "Trophy A";
 }
 else if (trophy.src == "...//user/trophies/B.png"){
   var x = document.getElementsByClassName("spaner")[0];
   x.textContent = "Trophy B";
 }
 else{ var x = document.getElementsByClassName("spaner");
   x.textContent = "Null";
 }

我正试图弄清楚如何使用这样的方法让它工作：

JavaScript

var trophiestext = Array.from(document.querySelectorAll("spaner"));
trophiestext.forEach(function(troph) {
  var trophy = document.getElementById("trophyimage");
  if(trophy.src == "...//user/trophies/A.png"){
    var x = document.getElementsByClassName("spaner"); 
    x.textContent = "Trophy A";
  }
  else if (trophy.src == "...//user/trophies/B.png"){
    var x = document.getElementsByClassName("spaner");
    x.textContent = "Trophy B";
  }
  else{ var x = document.getElementsByClassName("spaner");
    x.textContent = "Null";
  }
}

提前致谢！

解决方法

首先，有一个问题，多个 HTML 元素不能共享同一个 id 属性，你必须为类切换它们，而且“//user/trophies/A.png”可能不是一个有效的目录

HTML：

<div class="trophies">
    <img class="trophyimage" src="../user/trophies/A.png" height="100" width="100">
    <span class="text-content spanner"></span>
</div>
<div class="trophies">
    <img class="trophyimage" src="../user/trophies/B.png" height="100" width="100">
    <span class="text-content spanner"></span>
</div>
<div class="trophies">
    <img class="trophyimage" src="../user/trophies/C.png" height="100" width="100">
    <span class="text-content spanner"></span>
</div>

现在，JavaScript 可以更好地处理您的 HTML

Javascript：

// Don't forget the dot before the word trophies
const trophies = document.querySelectorAll('.trophies')

trophies.forEach(element => {
    const img = element.querySelector('.trophyimage')
    const src = img.getAttribute('src')
    const span = element.querySelector('.spanner')

    // change for the src to fit your files
    if (src === '../user/trophies/A.png') span.innerText = 'Trophy A'
    else if (src === '../user/trophies/B.png') span.innerText = 'Trophy B'
    else span.innerText = 'Null' // Actually writes the word null,for no text use empty quotes
})

如果您需要更多帮助，只需回复此答案:)

,

使用类，在此基础上添加描述，然后为未找到的类添加通用描述。

let trophyDesc = [{
  name: "type-a",description: "Trophy A"
},{
  name: "type-b",description: "Trophy B"
},{
  name: "type-c",description: "Trophy C"
},{
  name: "type-unknown",description: "Trophy Grand"
}];
const result = trophyDesc.find(({
  name
}) => name === 'type-unknown');
//console.log(result.description);
let trophies = document.getElementById("trophies");
let trophylist = trophies.getElementsByClassName("trophy");
//console.log(trophylist);
for (var i = 0,len = trophylist.length | 0; i < len; i = i + 1 | 0) {
  let t = trophylist[i];
  for (let d of trophyDesc) {
    let hasClass = t.classList.contains(d.name);
    if (hasClass) {
      let e = t.querySelector(".trophy-text-content");
      e.textContent = d.description;
      t.classList.add('found');
      break;
    }
  }
}
// now do not found ones
const f = trophies.querySelectorAll(`.trophy:not(.found)`);
for (let n of f) {
  n.querySelector(`.trophy-text-content`).textContent = result.description;
}
console.log(f.length);

.trophyimage {
  height: 100px;
  width: 100px;
}

<div id="trophies">
  <div class="trophy type-a"><img class="trophyimage" src="//user/trophies/A.png" alt="a">
    <span class="trophy-text-content">A</span></div>
  <div class="trophy type-b"><img id="trophyimage" src="//user/trophies/B.png" alt="b">
    <span class="trophy-text-content">B</span></div>
  <div class="trophy type-c"><img id="trophyimage" src="//user/trophies/C.png" alt="c">
    <span class="trophy-text-content">C</span></div>
  <div class="trophy type-u"><img id="trophyimage" src="//user/trophies/u.png" alt="u">
    <span class="trophy-text-content">U</span></div>
</div>