CODEWITHSUNDEEP
javascriptjqueryhtml
user4965201
user4965201

Reputation: 973

Javascript - load spinner infront of the particular button

I have a button and a spinner div as 

<button type = "button" value= "Make Current" class = "current_button"> </button>
<div class="place-left margin_L20 margin_T5 loading_spin_current" style="display: none">
    <small>Updating... <i class="fa fa-refresh fa-spin"></i></small>
</div>

i am Using ruby on rails to loop and show the multiple buttons and i want to show the spinner infront of the button which is being clicked by the user. this is what i have done

$('.current_button').on('click', function() {
    $('.loading_spin_current').show();
});

but it shows the spinner in front of all button . please tell me how can i do it , thankx in advance!

Upvotes: 2

Views: 203

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115222

$('.loading_spin_current') selects all elements with class loading_spin_current, you just want to select element immediately after the button so use next() method

$('.current_button').on('click', function() {    
    $(this).next('.loading_spin_current').show();
});

next() : Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector. ( Taken from https://api.jquery.com/next/ )

$('.current_button').on('click', function() {
  $(this).next('.loading_spin_current').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" value="Make Current" class="current_button"></button>
<div class="place-left margin_L20 margin_T5 loading_spin_current" style="display: none">
  <small>Updating... <i class="fa fa-refresh fa-spin"></i></small>
</div>
<button type="button" value="Make Current" class="current_button"></button>
<div class="place-left margin_L20 margin_T5 loading_spin_current" style="display: none">
  <small>Updating... <i class="fa fa-refresh fa-spin"></i></small>
</div>
<button type="button" value="Make Current" class="current_button"></button>
<div class="place-left margin_L20 margin_T5 loading_spin_current" style="display: none">
  <small>Updating... <i class="fa fa-refresh fa-spin"></i></small>
</div>
<button type="button" value="Make Current" class="current_button"></button>
<div class="place-left margin_L20 margin_T5 loading_spin_current" style="display: none">
  <small>Updating... <i class="fa fa-refresh fa-spin"></i></small>
</div>
<button type="button" value="Make Current" class="current_button"></button>
<div class="place-left margin_L20 margin_T5 loading_spin_current" style="display: none">
  <small>Updating... <i class="fa fa-refresh fa-spin"></i></small>
</div>
<button type="button" value="Make Current" class="current_button"></button>
<div class="place-left margin_L20 margin_T5 loading_spin_current" style="display: none">
  <small>Updating... <i class="fa fa-refresh fa-spin"></i></small>
</div>
<button type="button" value="Make Current" class="current_button"></button>
<div class="place-left margin_L20 margin_T5 loading_spin_current" style="display: none">
  <small>Updating... <i class="fa fa-refresh fa-spin"></i></small>
</div>
<button type="button" value="Make Current" class="current_button"></button>
<div class="place-left margin_L20 margin_T5 loading_spin_current" style="display: none">
  <small>Updating... <i class="fa fa-refresh fa-spin"></i></small>
</div>

UPDATE : If you want to toggle between show and hide then use toggle() instead show()

$('.current_button').on('click', function() {    
    $(this).next('.loading_spin_current').toggle();
});

Upvotes: 2

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

You can use .next() method for getting the corresponding spinner element of the clicked button

$('.current_button').on('click', function() {

    $(this).next().show();
});

Upvotes: 1

Related Questions