如何制作一个跨度，通过单击链接将其上划线，以便链接位于跨度的右侧？

发布于 2025-01-19 07:22:56 字数 710 浏览 1 评论 0原文

我需要在跨度的右侧创建一个链接，并通过单击该链接使该跨度加盖上划线。

主要问题是链接和跨度都超出了范围，我不知道如何解决它。另一个问题是它们不能通过宽度来证明，因为它们看起来是在一起的。

我尝试将 insertAdjacentElement 的 beforeend 属性更改为 afterend，但它使链接出现在每个跨度下，这实际上不是我想要的。

提前致谢！

let p = document.querySelectorAll('p');

p.forEach(node => {
  node.innerHTML = `<span>${node.textContent}</span>`;
})

for (let elem of p) {
  let a = document.createElement('a');
  a.href = '';
  a.innerHTML = 'cross';

  a.addEventListener('click', function(event) {
    event.preventDefault();
    elem.classList.toggle('overlined');
  })

  elem.insertAdjacentElement('beforeend', a);
}

原文

I need to make a link to the right of a span, and make that span overlined by clicking the link.

The main problem is that both link and span overlines, and I don't know how to fix it. The other problem is they can't be justified by width, as they appear to be together.

I tried to change beforeend attribute of insertAdjacentElement to afterend, but it makes link appear under every span, which is actually not what I want.

Thanks in advance!

let p = document.querySelectorAll('p');

p.forEach(node => {
  node.innerHTML = `<span>${node.textContent}</span>`;
})

for (let elem of p) {
  let a = document.createElement('a');
  a.href = '';
  a.innerHTML = 'cross';

  a.addEventListener('click', function(event) {
    event.preventDefault();
    elem.classList.toggle('overlined');
  })

  elem.insertAdjacentElement('beforeend', a);
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

醉酒的小男人 2025-01-26 07:22:56

这是因为您将 overlined 类应用到 p 元素，该元素也包含您的 cross 链接。使用 p 的 children[0] 或 firstChild 将其应用到 span。

我还建议向您的 span 和 a 标记添加一些 css 类，以便您可以根据需要设置它们的样式。

let p = document.querySelectorAll('p');

p.forEach(node => {
  node.innerHTML = `<span class="mySpan">${node.textContent}</span>`;
})

for (let elem of p) {
  let a = document.createElement('a');
  a.href = '';
  a.innerHTML = 'cross';
  a.classList.add("myLink");

  a.addEventListener('click', function(event) {
    event.preventDefault();
    elem.firstChild.classList.toggle('overlined');
  })

  elem.insertAdjacentElement('beforeend', a);
}

.overlined {
  text-decoration: line-through;
}

.mySpan {
  display: inline-block;
  margin-right: 10px;
  width: 50px;
}

.myLink {
  color: green;
  display: inline-block;
}

<p>test</p>
<p>test 2</p>

That's becasue you are applying the overlined class to the p element which also contains your cross link. Apply it to the span by using children[0] or firstChild of p.

I also suggest adding some css classes to your span and a tags so you can style them as you wish.

let p = document.querySelectorAll('p');

p.forEach(node => {
  node.innerHTML = `<span class="mySpan">${node.textContent}</span>`;
})

for (let elem of p) {
  let a = document.createElement('a');
  a.href = '';
  a.innerHTML = 'cross';
  a.classList.add("myLink");

  a.addEventListener('click', function(event) {
    event.preventDefault();
    elem.firstChild.classList.toggle('overlined');
  })

  elem.insertAdjacentElement('beforeend', a);
}

.overlined {
  text-decoration: line-through;
}

.mySpan {
  display: inline-block;
  margin-right: 10px;
  width: 50px;
}

.myLink {
  color: green;
  display: inline-block;
}