如何使用 jquery 更改模式内的文本？

Posted 2023-05-08

【中文标题】如何使用 jquery 更改模式内的文本？

【英文标题】：How can I change text inside a modal with jquery ?

【发布时间】：2019-05-31 09:51:24

【问题描述】：

大家好，我尝试使用 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">&times;</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？

完整代码：https://www.codeply.com/go/qoCnPUDDxG

【问题讨论】：

为每个包含您希望更改的唯一 ID 属性的文本/数据的元素提供 $('#unique_id').html('Text / Data here');。

【参考方案1】：

使用纯 javascript：

document.getElementById('exampleModalLongTitle').textContent = 'Bulbasaur';

使用 jQuery：

$('#exampleModalLongTitle').html("Bulbasaur");

对包含您的描述的任何元素执行相同操作。

【参考方案2】：

对于模态标题：

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

【参考方案3】：

您可以使用 id of 获取 div 的引用并在其中设置内容。

//In Jquery
$('#exampleModalLongTitle').html("your text");

//In js
document.getElementById('exampleModalLongTitle').textContent = 'you text';