如何使用 $(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

您仅淡出带有 btn 警告的按钮 class。而是使用两个选择器。

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

Answer 2

发生这种情况是因为：

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

这不是有效的选择器。要链接多个 jQuery 对象，您可以使用 .add() 方法，然后在集合上调用 .fadeOut(500)，例如：

$(".btn-success").on("click", function() {
  var $btn3 = $(this);
  var $btn2 = $(this).parent().children(".btn-warning");
  $btn2.add($btn3).fadeOut(500)
})

<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 () {
     $('.btn-warning, .btn-success').fadeOut(500);
})

如何使用 $(this) 同时淡出两个子元素

How to fadeOut two children elements simultaneously using $(this)

html

javascript

jquery

fadeout