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

Posted 2023-05-09

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

【英文标题】：How to get a specific child of the $(this) selector (out of two children)?

【发布时间】：2018-07-07 00:27:30

【问题描述】：

我已经尝试过来自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>

【参考方案1】：

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

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

【参考方案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>

【参考方案3】：

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

【讨论】：

点击事件不是应用到我点击的元素了吗？我认为$(document).ready 是我所有 jquery 的一个很好的包装器，这样当文档准备好时，我的函数就可以使用了。

当您将其用作选择器时不会。见 Major Allmightys 的回答，他使用一个类作为选择器:)

this 在$(document).ready 包装器中不起作用（请原谅双关语）？

@SpencerShattuck 确实如此，但它是文档。 （当您单击 anything 时，文档中的 everything 将切换 .hide）