0

I have already tried each of the solutions from: How to get the children of the $(this) selector?

I have two buttons, one for Friday and one for Saturday. I want to only show the spinner icon on the button I clicked, not both buttons.

The two code attempts below do not produce any errors. They simply don't work.

(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>
Spencer Shattuck
  • 86
  • 15

3 Answers3

2

Find spinner class on button click and remove hide class:

$('.waves-effect').click(function(){
   $(this).find('.fa-spin').removeClass('hide');
});
Mojo Allmighty
  • 793
  • 7
  • 18
2

this is context based, you need to understand when to use it.

if you are unsure of the context of this, you can always use console.log(this)

here is a fix for your code: 

(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>
am05mhz
  • 2,727
  • 2
  • 23
  • 37
1

Apply click events to the buttons instead of the document.

Nicky
  • 428
  • 3
  • 13
  • Isn't the click event applied to the element I clicked? I thought that `$(document).ready` was an okay wrapper for all of my jquery so that when the document is ready my functions will be usable. – Spencer Shattuck Jan 28 '18 at 01:03
  • Not when you are using this as a selector. See Major Allmightys answer, where he uses a class as selector :) – Nicky Jan 28 '18 at 01:05
  • `this` doesn't work (pardon the pun) when I'm inside a `$(document).ready` wrapper? – Spencer Shattuck Jan 28 '18 at 01:06
  • @SpencerShattuck sure it does, but it's the document. (When you click *anything*, *everything* in the document is having `.hide` toggled) – Tibrogargan Jan 28 '18 at 01:10