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

Question

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

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

(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

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

Answer 2

在单击按钮时找到微调器 class 并删除 hide class:

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

Answer 3

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>

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

How to get a specific child of the $(this) selector (out of two children)?

javascript

jquery

this

jquery-selectors