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

像这样：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();
});

Answer 2

如果您想要一个更灵活的解决方案，而不限于一定数量的对象，您可以使用另一种方法。

使用可点击元素的公共类（即可点击），以及设置clickable目标幻灯片的属性。

HTML：

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

使用Javascript：

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

为jquery id添加一个变量计数器

2 个答案: