首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Element.setAttribute只在控制台上反射

Element.setAttribute只在控制台上反射
EN

Stack Overflow用户
提问于 2022-05-26 21:12:07
回答 2查看 53关注 0票数 0

我对网络开发非常陌生。在实验HTML中的一个小JavaScript时,我试图更改元素的内容。当我执行下面的代码时,我会在控制台中得到“”,这是想要的结果。但是,弹出程序中的内容不会更新。

为什么它只更新在控制台而不是网站上?

代码语言:javascript
运行
复制
$(function() {
  $('[data-bs-toggle="popover"]').popover()
  document.getElementById('rex').setAttribute('data-bs-content', 'Updated Content');
  console.log(document.getElementById('rex').getAttribute('data-bs-content'));
})
代码语言:javascript
运行
复制
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</head>

<body>
  <a id='rex' href="#" title="Header" data-bs-toggle="popover" data-placement="top" data-bs-content="Content">Click</a>
</body>

</html>

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-05-26 21:40:52

我仍然不确定你想要更新什么,但是看看这个。我没有在你的html里改变任何东西。我正在为#rex链接创建一个on绑定,它更新了几个东西.我的意见如下。我也只使用jquery语法。您发布的是jquery和一些纯javascript的混合和匹配。您在很早就会注意到这种差异,但是现在由于Bootstrap需要jquery,这没什么大不了的。

代码语言:javascript
运行
复制
 $(document).on('click', '#rex', function() {
    $(this).text('Updated Content');                          //text of the anchor
    $(this).attr('data-bs-content', 'Updated Content');       //text of the popover
    $(this).popover('show');                                  //trigger popover to show
    // $(this).popover('toggle');                             //or use a toggle
 });

https://jsfiddle.net/otzyd54h/

票数 0
EN

Stack Overflow用户

发布于 2022-05-26 21:29:05

如果要更改弹出后显示的内容,则需要更新弹出本身:

代码语言:javascript
运行
复制
document.getElementsByClassName('popover-body')[0].textContent = 'Updated Content';
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72398049

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档