大家好我试图用pokeapi创建一个pokedex。我的模态看起来像这样:
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle"> #1 Pokemon-Name</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Some information
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
和这样的js:
const button = document.createElement("BUTTON");
button.setAttribute("data-toggle","modal");
button.setAttribute("data-target","#exampleModalCenter");
我的问题是如何将模态的标题和描述更改为bulbasaur?
对于模态标题:
document.getElementById("exampleModalLongTitle").innerHTML="bulbasaur"; //pure JS
$("#exampleModalLongTitle").html("bulbasaur") //with Jquery
为了便于说明,请在HTML元素中添加id属性
<div id="modalDescription" class="modal-body">
Some information
</div>
document.getElementById("modalDescription").innerHTML="bulbasaur description"; // pure JS
$("#modalDescription").html("bulbasaur description") //with Jquery
使用普通的javascript:
document.getElementById('exampleModalLongTitle').textContent = 'Bulbasaur';
使用jQuery:
$('#exampleModalLongTitle').html("Bulbasaur");
对于包含描述的元素,请执行相同操作。
您可以使用id获取div的引用并在其中设置内容。
//In Jquery
$('#exampleModalLongTitle').html("your text");
//In js
document.getElementById('exampleModalLongTitle').textContent = 'you text';