如何使用$（this）同时淡出两个子元素

Question

我有一个div，其中有3个按钮。我期望的是，当我单击第3个按钮时，第2个和第3个按钮应该淡出...但是实际上，只有第3个按钮正在逐渐消失...为什么这样？

这里是我的代码

<div id="bttns">
<button class="btn btn-danger"> Delete </button>     //1st Button
<button class="btn btn-warning"> Modify </button>    //2nd Button
<button class="btn btn-success"> Complete </button>  //3rd Button
</div>

这是jQuery

$(".btn-success").on("click", function(){
 $( $(this) , $(this).parent().children(".btn-warning") ).fadeOut(500)
})

我找不到与我的问题类似的问题……而且我对所有这些都是陌生的，因此，如果您确实发现存在这样的问题，请重定向至该问题。

Answer 1

发生这种情况是因为：

$( $(this) , $(this).parent().children(".btn-warning") )

这里不是有效的选择器。要链接多个jQuery对象，可以使用.add()方法，然后在集合上调用.add()，例如：
 
.fadeOut(500)
$(".btn-success").on("click", function() {
  var $btn3 = $(this);
  var $btn2 = $(this).parent().children(".btn-warning");
  $btn2.add($btn3).fadeOut(500)
})

Answer 2

您正在淡出btn-warning类的按钮。而是使用两个选择器。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bttns">
  <button class="btn btn-danger"> Delete </button>
  <button class="btn btn-warning"> Modify </button>
  <button class="btn btn-success"> Complete </button>
</div>

Answer 3

您已分配课程。你可以这样：-

$(".btn-success").on("click", function(){
 $(this).parent().children(".btn-warning, .btn-success").fadeOut(500)
})