[英]Select 'this' object of clicked element only (not the other elements within the same class)
I am trying to change buttons text on click (using Bootstrap 4). 我试图更改单击时的按钮文本(使用Bootstrap 4)。 I have a problem with using the correct syntax. 我在使用正确的语法时遇到问题。
My html: 我的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>
and JS: 和JS:
$(".dropdown-menu a").click(function () {
$(".btn:first-child").html($(this).text());
});
To rephrase - when I click on one button and change its value, the other one changes too... 换个说法-当我单击一个按钮并更改其值时,另一个按钮也会更改...
So I would like to change this value of the only clicked. 因此,我想更改此唯一点击的值。
You need to change the html
of the .btn
relative to your link. 您需要相对于您的链接更改.btn
的html
。
You can do that by selecting the closest .btn-group
to your link, then searching for .btn
inside it : 您可以通过选择最接近链接的.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>
$(".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>
Try 尝试
$(".dropdown-menu a").click(function () {
$(this).parent().find(".btn:first-child").html($(this).text());
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.