有可能减少代码？

Question

我想知道我是否可以将其分解为更少的代码.

我将slidetoggle设置为页面的4个不同部分,每个div都有自己的id.

我希望它可以减少到几行代码,因为每个div具有相同的slideToggle速度200.

这是代码:

$(document).ready(function() {
  $('#our-future-intro-slide').click(function() {
    //$(".our-future-intro").delay(2400).slideDown(3600);
    $(".our-future-intro").slideToggle(200);
  });
  $('#strategic-planning-click').click(function() {
    $("#strategic-planning").slideToggle(200);
  });
  $('#student-learning-click').click(function() {
    $("#student-learning").slideToggle(200);
  });
  $('#institutional-assessment-click').click(function() {
    $("#institutional-assessment").slideToggle(200);
  });
});

Answer 1

您可以在选择器中放置多个ID,以逗号分隔.然后,只需取出-click或-slide从被点击的元素的ID.

$(document).ready(function() {
  $('#strategic-planning-click,#student-learning-click,#institutional-assessment-click,#our-future-intro-slide').click(function() {
    var id = this.id.replace(/-click|-slide/, '');
    $("#" + id).slideToggle(200);
  });
});

编辑:

正如@Ben Blank所说,.our-future-intro是一个类,而不是一个ID.如果您不能使用ID,则可以按如下方式修改上述代码:

$(document).ready(function() {
  $('#strategic-planning-click,#student-learning-click,#institutional-assessment-click,#our-future-intro-slide').click(function() {
    var selector = this.id.replace(/^(.+)(-click|-slide)$/, function(str,p1,p2) { return (p2 == '-click') ? '#' + p1 : '.' + p1; })
    $(selector).slideToggle(200);
  });
});

编辑:

根据您提供的代码示例,另一种选择是:

请注意,它依赖于您的HTML结构保持一致.

$(document).ready(function() {
  $('#strategic-planning-click,#student-learning-click,#institutional-assessment-click,#our-future-intro-slide').click(function() {
    $(this).parent().next().slideToggle(200);
  });
});

• http://api.jquery.com/parent/
• http://api.jquery.com/next/