主页 / 问题 / 1239571
Accepted
HedgeHog
Asked:2022-02-03 23:09:20 +0000 UTC2022-02-03 23:09:20 +0000 UTC

更改按钮单击html上的标记文本

  • 772

我们有下面的代码，p标签有一个title属性，里面存储了完整的日期，问题是，你怎么能保证当你点击下面的按钮时，p标签中的文字被替换为来自的文字标题属性，当您再次单击时，返回到 .

例子：

10天。1小时前

哭（）

2021-01-24 16:37:06.050669

哭（）

10天。1小时前

<p class="date" title="2021-01-24 16:37:06.050669">10 дней. 1 час назад</p>
<button type="button">🔄</button>

html

1 个回答

  1. Best Answer

    纯JS中的快速解决方案

    const elements = document.querySelectorAll('button.toggle_date');

for (const el of elements) {

el.addEventListener('click', (e) => {
    const p = e.target.previousElementSibling;
    const title = p.title;
    const html = p.innerHTML;
    p.innerHTML = title;
    p.title = html;
  })
}
    <p class="date" title="2021-01-24 16:37:06.050669">10 дней. 1 час назад</p>
<button class="toggle_date" type="button">🔄</button>

    仅当按钮紧跟在 tag 之后才有效p。如果它们在不同的地方或者不同的嵌套层级，那么你需要重写代码，给标签和按钮赋予唯一的标识符，这样你就可以搜索到对应的p

    • 3

相关问题