如何获取 $(this) 选择器的特定子项（从两个子项中）？

Question

我已经尝试过来自How to get the children of the $(this) selector? 的每个解决方案

我有两个按钮，一个用于星期五，一个用于星期六。我只想在我点击的按钮上显示微调器图标，而不是两个按钮。

下面的两个代码尝试不会产生任何错误。它们根本不起作用。

(function($) {

  $(document).ready(function(){

    $(this).on('click', function(){
      $(this).children('.hide').toggleClass('.hide');
    });

  });

})( jQuery );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>

<a href="#" class="waves-effect waves-light btn mb15 w100">
  <span class="button-text">Friday </span>
  <i class="fa fa-life-ring fa-spin hide"></i>
</a>
<a href="#" class="waves-effect waves-light btn mb15 w100">
  <span class="button-text">Saturday</span>
  <i class="fa fa-life-ring fa-spin hide"></i>
</a>

(function($) {

  $(document).ready(function(){

    $(this).on('click', function(){
      $('.hide', this).toggleClass('.hide');
    });

  });

})( jQuery );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>

<a href="#" class="waves-effect waves-light btn mb15 w100">
  <span class="button-text">Friday </span>
  <i class="fa fa-life-ring fa-spin hide"></i>
</a>
<a href="#" class="waves-effect waves-light btn mb15 w100">
  <span class="button-text">Saturday</span>
  <i class="fa fa-life-ring fa-spin hide"></i>
</a>

Answer 1

在按钮单击时查找微调器类并删除 hide 类：

$('.waves-effect').click(function(){
   $(this).find('.fa-spin').removeClass('hide');
});

Answer 2

this 是基于上下文的，您需要了解何时使用它。

如果您不确定this 的上下文，您可以随时使用console.log(this)

这里是您的代码的修复：

(function($) {

  $(document).ready(function(){

    $('a.btn').on('click', function(){
      $(this).find('i').toggleClass('hide');
    });

  });

})( jQuery );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>

<a href="#" class="waves-effect waves-light btn mb15 w100">
  <span class="button-text">Friday </span>
  <i class="fa fa-life-ring fa-spin hide"></i>
</a>
<a href="#" class="waves-effect waves-light btn mb15 w100">
  <span class="button-text">Saturday</span>
  <i class="fa fa-life-ring fa-spin hide"></i>
</a>

Answer 3

将点击事件应用于按钮而不是文档。