javascript loop close div with corresponding button class number

Question

I want the button with the class name of "x-1" to give the div with the class name of "popup-1" a display property of "none". and "x-2" gives the div "popup-2" a display of "none" when clicked. i have tried this and when i press "x-1" it gives a display of "none" to "popup-2" instead of "popup-1".

$(document).ready(function(){
   var xCount = 2;
   for (i = 0; i < xCount; i++) {
      $('.x-'+i).click(function(){
         $('.popup-'+i).css('display','none');
      });
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="x-1">Hide popup-1</button>
<button class="x-2">Hide popup-2</button>

<div class="popup-1">popup-1</div>
<div class="popup-2">popup-2</div>

It is a problem of closures, so i should be declared using the let keyword to avoid getting into closures — Saadi Toumi Fouad
– Saadi Toumi Fouad, Commented Oct 4, 2020 at 5:46
This is a good question about closures: stackoverflow.com/questions/750486/… — A_A
– A_A, Commented Oct 4, 2020 at 5:49
Does this answer your question? JQuery loop function only works on last element — Akif
– Akif, Commented Oct 4, 2020 at 6:17

sandeep joshi · Accepted Answer · 2020-10-04 05:51:53Z

3

your loop defines an i variable in global scope. so when you click on button, i is already mutated better define i with let keyword to avoid closure problem. here is rectification of your code.

$(document).ready(function() {
  var xCount = 2;
  for (let i = 1; i <= xCount; i++) {
    $('.x-' + i).click(function() {
      $('.popup-' + i).css('display', 'none');
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="x-1">Hide popup-1</button>
<button class="x-2">Hide popup-2</button>

<div class="popup-1">popup-1</div>
<div class="popup-2">popup-2</div>

answered Oct 4, 2020 at 5:51

sandeep joshi

2,1891 gold badge10 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abhishek Borikar · Accepted Answer · 2020-10-04 05:59:22Z

0

Firstly adding click events to loop is not good practise.

Now answer to your question you have two button added click by id separating with comma. Here is something you can try.

$('.x-1,.x-2').click(function(){
var className = this.className;
  if(className === 'x-1')
  {
  ... do something ....
  }
  else
  {
  ... do something ....
  }
});

answered Oct 4, 2020 at 5:59

Abhishek Borikar

4341 gold badge6 silver badges18 bronze badges

Collectives™ on Stack Overflow

javascript loop close div with corresponding button class number

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related