javascript - 如何使用 jquery 更改 html 按钮标签的文本

Question

我有一个 html 代码，我想使用 jQuery 更改文本值...

<div class="dropdown">
   <button type="button" class="btn btn-secondary dropdown-toggle button-text" data-toggle="dropdown"><span>1395</span></button>
      <ul class="dropdown-menu">
         <li><a class="dropdown-item" href="#">1395</a></li>
         <li><a class="dropdown-item" href="#">1396</a></li>
         <li><a class="dropdown-item" href="#">1397</a></li>
         <li><a class="dropdown-item" href="#">1398</a></li>
         <li><a class="dropdown-item" href="#">1399</a></li>
      </ul>
</div>

不要介意这个类（ btn btn-secondary dropdown-toggle ）它的引导程序......

标签： javascriptjqueryhtml

Answer 1

我在跨度上放了一个类，以便于定位。然后我只是在处理任何项目的点击的下拉列表上放置一个点击绑定。单击任何项​​目时，它会找到最近的父下拉列表，然后在其中找到相关的嵌套选择元素并更改其文本。

$('.dropdown').on('click', '.dropdown-item', function(e){
  $(e.target).closest('.dropdown').find('.selection').text(e.target.innerText);
});

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="dropdown">
   <button type="button" class="btn btn-secondary dropdown-toggle button-text" data-toggle="dropdown"><span class="selection">1395</span></button>
      <ul class="dropdown-menu">
         <li><a class="dropdown-item" href="#">1395</a></li>
         <li><a class="dropdown-item" href="#">1396</a></li>
         <li><a class="dropdown-item" href="#">1397</a></li>
         <li><a class="dropdown-item" href="#">1398</a></li>
         <li><a class="dropdown-item" href="#">1399</a></li>
      </ul>
</div>