javascript - 如何重构这个简单的代码

Question

我有以下脚本:

$(document).ready(function() {
  $('#q1_6').on("click", function(event){
    $('#q1-f').slideToggle(350);
  });
  $('#q1_7').on("click", function(event){
    $('#q1-m').slideToggle(350);
  });
  $('#q1_15').on("click", function(event){
    $('#q1-o').slideToggle(350);
  });
  $('#q2_6').on("click", function(event){
    $('#q2-f').slideToggle(350);
  });
  $('#q2_7').on("click", function(event){
    $('#q2-m').slideToggle(250);
  });
  $('#q2_15').on("click", function(event){
    $('#q2-o').slideToggle(350);
  });
  $('#q3_13').on("click", function(event){
    $('#q3-o').slideToggle(350);
  });
});

这些调用是否正确，或者我是否应该以某种方式重构脚本以避免重复？

编辑: 我正在创建一个调查，一页上显示大约 20 个问题。答案在复选框中。一些答案有额外的选项(子答案)，当用户点击家长答案时应该显示这些选项。这是 HTML 标记，以便更好地理解

  <div>
    <input type="checkbox" id="q1_5"/><label for="q1_5">Answer 5</label>
  </div>
  <div>
    <input type="checkbox" id="q1_6"/><label for="q1_6">Answer 6</label>
  </div>
  <div id="q1-f">
    <div>
      <input type="checkbox" id="q1_6_1"/><label for="q1_6_1">Answer 6-1</label>
    </div>     
    <div>
      <input type="checkbox" id="q1_6_2"/><label for="q1_6_2">Answer 6-2</label>
    </div>     
    <div>
      <input type="checkbox" id="q1_6_3"/><label for="q1_6_3">Answer 6-3</label>
    </div>         
  </div>

当前脚本运行良好，但我想知道是否可以避免重复相同的代码片段。

Answer 1

如果您有权访问 HTML 并且可以影响元素的结构，当单击这些元素时会启动切换，那么我会添加一个类和数据属性:

<a href='#' id='q1_6' class='toggle' data-toggle-id='q1-f'>blah</a>

$(document).ready(function() {
  $('a.toggle').on('click', function(){
    var $el = $(this),
        toggleID = '#' + $el.attr('data-toggle-id'),
        toggleValue = 350;

    $(toggleID).slideToggle(toggleValue);
  });
});