僅選擇單擊元素的“此”對象（而不選擇同一類中的其他元素）

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());

});