仅选择单击元素的“此”对象（而不选择同一类中的其他元素）

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> 

Answer 2

 $(".dropdown-menu a").click(function () { var text = $(this).text(); $(this).closest('.btn-group').find('.btn').html(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> 

Answer 3

尝试

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

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

});