0

I have the class deal1 to deal6. For these classes I want to build a click function in a loop and increment the class names in the selector, but somehow it's not working.

Here is my code:

var deal = [];
var x = 0;

for (x = 1; x <= 6; x++) {
    deal[x] = jQuery('.deal' + x).click(function(){
        jQuery('.deal' + x).toggleClass('open');        
    });
    console.log(deal[1,2], 'x');
};

Can someone help me to do this right?

freedomn-m
  • 27,664
  • 8
  • 35
  • 57
Benjamin Seifert
  • 21
  • 8

4 Answers4

0

Try with this:

var deal = [];

for (let x = 1; x <= 6; x++) {
    var element = $('.deal' + x);
    element.on('click', function(e){
        $(this).toggleClass('open');
    });

});

Would you tell us why do you want the array?

Martin Shishkov
  • 2,709
  • 5
  • 27
  • 44
0

The issue is that the click event occurs after the loop has finished, so the value of 'x' is no longer the value it would be within the loop.

eg when x is 3, it adds an event to .deal3 but when it's clicked, x now = 6 so it toggles .deal6.

This is why you can use this inside the event handler.

var x = 0;

for (x = 1; x <= 6; x++) {
    jQuery('.deal' + x).click(function(){
        jQuery(this).toggleClass('open');        
    }); 
};

In the case where you're clicking a button that's a child element, you still use this, but now this is the button, so use .closest() to find the relevant container:

var x = 0; 
for (x = 1; x <= 6; x++) { 
    jQuery('.deal' + x + ' .iw-so-media-box').click(function(){ 
        jQuery(this).closest(".deal").toggleClass('open'); 
    }); 
}

in this case, I would add a second class (as shown above), giving your html as:

<div class='deal deal1'>
  <div>deal 1</div>
  <button class='iw-so-media-box' type='button'>toggle</button>
</div>

However, if you've done that anyway, then just get rid of the loop completely and add your event handler to .deal:

jQuery('.deal .iw-so-media-box').click(function() {
  jQuery(this).closest(".deal").toggleClass('open');
});
.deal>div {
  display: none;
}

.deal.open>div {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='deal deal1'>
  <div>deal 1</div>
  <button class='iw-so-media-box' type='button'>toggle</button>
</div>
<div class='deal deal2'>
  <div>deal 2</div>
  <button class='iw-so-media-box' type='button'>toggle</button>
</div>
<div class='deal deal3'>
  <div>deal 3</div>
  <button class='iw-so-media-box' type='button'>toggle</button>
</div>
freedomn-m
  • 27,664
  • 8
  • 35
  • 57
  • this words fine. Can you also to help, what should i do when i try to toggle the Class with a button. var x = 0; for (x = 1; x <= 6; x++) { jQuery('.deal' + x + ' .iw-so-media-box').click(function(){ jQuery('.deal' + x).toggleClass('open'); }); }; – Benjamin Seifert Apr 06 '18 at 08:58
  • That should really be a new question, but I've added some details regarding using `.closest` – freedomn-m Apr 06 '18 at 09:07
0

Try this example:

$(function() {
  var selector = $.map(new Array(6), function(_, i) {
    return '.deal' + (1 + i);
  }).join(',');
  console.log(selector);
  $(selector).on('click', function() {
    $(this).toggleClass('open');
  });
});
.open {
  background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class='deal1'>Deal 1</li>
  <li class='deal2'>Deal 2</li>
  <li class='deal3'>Deal 3</li>
  <li class='deal4'>Deal 4</li>
  <li class='deal5'>Deal 5</li>
  <li class='deal6'>Deal 6</li>
</ul>

$(function() {
  $('[class*=deal]').on('click', function() {
    $(this).toggleClass('open');
  });
});
.open {
  background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class='deal1'>Deal 1</li>
  <li class='deal2'>Deal 2</li>
  <li class='deal3'>Deal 3</li>
  <li class='deal4'>Deal 4</li>
  <li class='deal5'>Deal 5</li>
  <li class='deal6'>Deal 6</li>
</ul>

$(function() {
  $('.deal').on('click', function() {
    $(this).toggleClass('open');
  });
});
.open {
  background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class='deal'>Deal 1</li>
  <li class='deal'>Deal 2</li>
  <li class='deal'>Deal 3</li>
  <li class='deal'>Deal 4</li>
  <li class='deal'>Deal 5</li>
  <li class='deal'>Deal 6</li>
</ul>
  • Thank you very much. Maybe you can help me with the next step i struggle. How can i do it, when i want to use a button for example: .deal1 .button toggle class .deal1 – Benjamin Seifert Apr 06 '18 at 09:07
0

If you don't want to work with for loop, you can use like below. This code snippet will work.

$('[class*="deal"]').on("click", function() {
    $('[class*="deal"]').slice(0, 6).toggleClass('open')         
})
Ali
  • 1,358
  • 3
  • 21
  • 32