Question

我有以下HTML ...

<html>
 <body>
  <a class="one" href="example.html">
   <span class="two">_____</span></a>
 </body>
</html>

其中span标记之间的textNode根据父href标记的a目标而更改，使用以下JavaScript：

var href = document.querySelector(".one").getAttribute("href");
var two = document.querySelectorAll(".two");

var example = document.createTextNode("example");

if (href.startsWith("example")) {
  two.forEach(function(twoExample) {
    twoExample.appendChild(example);
    })
  }

但是，我有许多a和span个标记共享相同的className，我试图应用相同的JavaScript;因此，如果另一个a标记的样本为href，则textNode会相应更改以获得以下预期结果：

var href = document.querySelector(".one").getAttribute("href");
var two = document.querySelectorAll(".two");

var example = document.createTextNode("example");

if (href.startsWith("example")) {
  two.forEach(function(twoExample) {
    twoExample.appendChild(example);
    })
  }

<html>
 <body
  <a class="one" href="example.html">
   <span class="two">example</span></a>
 </body>
</html>

var example = document.createTextNode("sample");

if (href.startsWith("sample")) {
  two.forEach(function(twoSample) {
    twoSample.appendChild(sample);
    })
  }

<html>
 <body>
  <a class="one" href="sample.html">
   <span class="two">sample</span></a>
 </body>
</html>

但事实并非如此，第一个if函数似乎会覆盖其他函数的其余部分，以及将子项追加到具有相同className忽略{{1}的最后一个元素目的地。

我不确定解决这个问题，因此问题。如果有人有答案，我们将不胜感激！

注意：只有Vanilla JavaScript。

Answer 1

我会用简单的CSS做到这一点：

＆＃13;

a.one[href^=example]::before {
  content: 'example';
}

a.one[href^=sample]::before {
  content: 'sample';
}

＆＃13;

<a class="one" href="example.html"></a>
<a class="one" href="sample.html"></a>

＆＃13;

当然，如果需要，您仍然可以将::after伪元素设置为与span相同。

如果您仍想学习JS代码，则需要遍历所有链接并更改内部span textContent属性。例如：

＆＃13;

var links = Array.from(document.querySelectorAll('.one'))

links.forEach(function(link) {
  var span = link.querySelector('.two')
  var href = link.getAttribute('href')

  if (href.startsWith('example')) {
    span.textContent = 'example'
  } else if (href.startsWith('sample')) {
    span.textContent = 'sample'
  }
})

＆＃13;

<a class="one" href="example.html">
  <span class="two"></span>
</a>
<a class="one" href="sample.html">
  <span class="two"></span>
</a>

＆＃13;

createTextNode取决于href目标 - 没有jQuery

1 个答案: