添加一個變量計數器jquery id

Question

我有下面的代碼目前，它工作正常。

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

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

我需要重構它來在循環方面爲我創造奇蹟。我想要有一條語句爲id切換添加一個數字，並使用循環最多可以點擊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(); 
});