我对网络开发非常陌生。在实验HTML中的一个小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'));
})
<!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>
发布于 2022-05-26 21:40:52
我仍然不确定你想要更新什么,但是看看这个。我没有在你的html里改变任何东西。我正在为#rex链接创建一个on绑定,它更新了几个东西.我的意见如下。我也只使用jquery语法。您发布的是jquery和一些纯javascript的混合和匹配。您在很早就会注意到这种差异,但是现在由于Bootstrap需要jquery,这没什么大不了的。
$(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
});
发布于 2022-05-26 21:29:05
如果要更改弹出后显示的内容,则需要更新弹出本身:
document.getElementsByClassName('popover-body')[0].textContent = 'Updated Content';
https://stackoverflow.com/questions/72398049
复制相似问题