如何获取$(this)选择器的特定子元素？实现按钮点击单独显示Spinner

我来帮你搞定这个问题！你现在遇到的核心问题是事件绑定的目标不对，还有toggleClass的用法有误，导致代码完全没生效。咱们一步步来修正：

你的代码里的两个关键错误： #

• 事件绑定对象错误：在$(document).ready(function(){ $(this).on('click', ...) })里，$(this)指向的是document而非你的按钮。这样点击事件绑定在了整个文档上，回调里的$(this)自然也不是你点击的那个按钮，根本找不到目标子元素。
• toggleClass的类名格式错误：你写的toggleClass('.hide')多了个.，这个方法只需要传入类名本身，不需要加选择器的点符号。

修正后的完整代码： #

<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>

<script>
(function($) { 
  $(document).ready(function(){ 
    // 把点击事件绑定到所有按钮上
    $('.btn').on('click', function(e){ 
      e.preventDefault(); // 阻止a标签默认跳转，避免页面刷新丢失状态
      // 这里的$(this)就是当前被点击的按钮，精准找到它内部的Spinner元素切换类
      $(this).children('.hide').toggleClass('hide'); 
    }); 
  }); 
})( jQuery );
</script>

关键细节说明： #

• 我们将事件绑定到.btn选择器上，确保每个按钮都能独立响应点击。
• 回调里的$(this)就是当前被点击的按钮，用children('.hide')可以精准定位到它内部的Spinner图标。
• 加上e.preventDefault()是为了阻止a标签默认的跳转行为，避免页面刷新导致Spinner刚显示就消失。
• 如果想让Spinner显示时隐藏按钮文本，还可以额外加一行：$(this).find('.button-text').toggleClass('hide');，让交互更完整。

内容的提问来源于stack exchange，提问作者Spencer Shattuck