Question

我是新手，1周的工作经验，所以如果有一个非常明显的解决方案，我很抱歉。我快速浏览了类似标题的帖子，但找不到我能用的任何东西。

我一直在处理一个包含可折叠部分的表单，这样当用户完成一个部分时，他们可以单击一个部分栏，它会折叠该部分，而表单的其余部分保持打开状态。我使用以下代码

实现了这一目标

  $('#options').click(function() {
     $('div.options').toggle('slow');
     return false;
  });
     $('#options2').click(function() {
     $('div.options').toggle('slow');
     return false;
   });   
   $('#clientdetails').click(function() {
    $('div.clientdetails').slideToggle('100');
    return false;
  });
     $('#clientaddress').click(function() {
    $('div.clientaddress').slideToggle('100');
    return false;
  });
     $('#groupoptions').click(function() {
    $('div.groupoptions').slideToggle('100');
    return false;
  });
  $('#bookingoptions').click(function() {
    $('div.bookingoptions').slideToggle('100');
    return false;
  });
  $('#dataexchangeoption').click(function() {
     $('div.dataexchangeoption').slideToggle('100');
     return false;
  });
  $('#invoice').click(function() {
     $('div.invoice').slideToggle('100');
     return false;
  });   
    $('#contacts').click(function() {
     $('div.contacts').slideToggle('100');
     return false;
  });  
  $('#notes').click(function() {
     $('div.notes').slideToggle('100');
     return false;
  });
    $('#tasks').click(function() {
     $('div.tasks').slideToggle('100');
     return false;
  });

然后，每个部分的部分只是标记为各自分区的id或class标签。然而，显然这是一个很多命令的地狱，基本上是相同的事情与一些标签交换。有没有办法将所有这些编译成1个函数，这仍然可以让我允许不同的分裂崩溃？如果真的很明显的话，任何帮助都会得到很好的回复和再次见证。

Answer 1

将ID替换为rel属性，并为切换器添加单独的类：

<a rel="options" class="toggler">Options</a>

然后你可以写

$('.toggler').click(function() {
    $('div.' + $(this).attr('rel')).slideToggle('100');
    return false;
});

Answer 2

好吧，你可以为所选效果添加一个类，然后为这些类的元素点击编写一些处理程序。

另外，假设您为锚标记添加一个名称，以将它们链接到应该执行切换的位置。

  $('.optionsbutton').click(function() {
     $('div.options').toggle('slow');
     return false;
  });
  $('.slidetoggle').click(function() {
     $("#" + $(this).attr('name')).slideToggle('100');
     return false;
  });

这是我用来说明的一个小小的JSFiddle：http://jsfiddle.net/Hy8kW/2/

度过愉快的一天，祝你好运。

Answer 3

你的解决方案是给所有可折叠部分一个通用的类名，然后给该类一个使用“this”引用的toggle（）

$('.collapse').click(function(){
   $(this).toggle('slow);
   return false;
});

因为它是一个toggle（）函数，我想你想要一种把它带回来的方法，如果是这样你可以使用'this'并遍历DOM树

$('.collapse').click(function(){
   $(this).children('.hideThis').toggle('slow);
   return false;
});

Answer 4

您可以在选择器中使用,运算符来匹配多个ID：

$('#options,#options2').click(function() {
  $('div.options').toggle('slow');
  return false;
});

（注意：点击任一元素切换相同的div。我不知道这是否是故意的，但这就是原始代码所做的。）

您可以使用单击元素的id来使元素的选择器切换：

$('#clientdetails,#clientaddress,#groupoptions,#bookingoptions,#dataexchangeoption,#invoice,#contacts,#notes,#tasks').click(function() {
  $('div.' + this.id).slideToggle('100');
  return false;
});

这些可以作为代码的替代品，无需更改标记。代码可能会受益于标记的更改，但这是另一回事。

简化重复的javascript

4 个答案: