javascript - 仅选择被单击元素的 'this' 对象(而不选择同一类中的其他元素)

Question

我正在尝试更改单击时的按钮文本(使用 Bootstrap 4)。我在使用正确的语法时遇到问题。

我的html:

<div class="btn-group">
  <button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuButton2">
  Option 1                  
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
    <a class="dropdown-item" href="#">Option 2</a>
    <a class="dropdown-item" href="#">Option 3</a>
 </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuButton2">
  Type 1                  
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
    <a class="dropdown-item" href="#">Type 2</a>
    <a class="dropdown-item" href="#">Type 3</a>
 </div>
</div>

和JS:

$(".dropdown-menu a").click(function () {

  $(".btn:first-child").html($(this).text());

});

换句话来说 - 当我单击一个按钮并更改其值时，另一个按钮也会更改......

所以我想更改唯一点击的这个值。

Answer 1

您需要更改与链接相关的 .btn 的 html。

您可以通过选择距离您的链接最近的 .btn-group，然后在其中搜索 .btn 来实现此目的:

$(".dropdown-menu a").click(function () {
  $(this).closest('.btn-group').find('.btn').html($(this).text());
});

$(".dropdown-menu a").click(function() {
  $(this).closest('.btn-group').find('.btn').html($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
  <button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuButton2">
  Option 1                  
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
    <a class="dropdown-item" href="#">Option 2</a>
    <a class="dropdown-item" href="#">Option 3</a>
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuButton2">
  Type 1                  
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
    <a class="dropdown-item" href="#">Type 2</a>
    <a class="dropdown-item" href="#">Type 3</a>
  </div>
</div>