добавить переменный счетчик в jquery id

Question

У меня есть код ниже в настоящее время, и он отлично работает.

$('.clickable').click(function(e){ 
    e.preventDefault(); 
    $('#toggle').slideToggle(); 
}); 

$('.clickable1').click(function(e){ 
    e.preventDefault(); 
    $('#toggle1').slideToggle(); 
}); 

Мне нужно реорганизовать его, чтобы творить чудеса для меня с точки зрения цикла. Я хочу иметь один оператор, который добавит номер в id toggle и класс clickable, используя цикл для максимального числа 5 раз.

Что-то, как показано ниже

for(i = 0; i < 8; i++) { 
    $('.clickable'.' + i + ').click(function(e){ 
     e.preventDefault(); 
     $('#toggle'.' + i + ').slideToggle(); 
    }); 
} 

Answer 1

Если вы хотите получить более гибкое решение, остроумие ограничение, ограничивающее определенное количество объектов, вы могли бы использовать другой подход.

Использование общего класса для элементов с интерактивным доступом (например, кликабель) и атрибута для установки целевого слайда clickable.

Html:

<a href='#' class='clickable' data-target='1'>Slide</a> 

Javascript:

$('.clickable').click(function(e){ 
    e.preventDefault(); 
    $('#toggle' + $(this).data('target')).slideToggle(); 
}); 

Answer 2

Что-то вроде этого: solution

HTML

<a href="#" class="clickable1" data-target="1"> 
    Words to click 
</a> 
<div class="toggle1" class="hidden-to-show"> 
<ul> 
    <li>Item One</li> 
    <li>Item One</li> 
    <li>Item One</li> 
    <li>Item One</li> 
</ul> 
</div> 
<a href="#" class="clickable2" data-target="2">Words to click</a> 
    <div class="toggle2" class="hidden-to-show"> 
    <ul> 
    <li>Item One</li> 
    <li>Item One</li> 
    <li>Item One</li> 
    <li>Item One</li> 
    </ul> 
</div> 
<br> 

JS

$('a').click(function(e){ 
    e.preventDefault(); 
    $('.toggle' + $(this).attr('data-target')).slideToggle(); 
});