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);
  });
});

Answer 2

不知道你的例子中ID如何相关。

function toggle(id, id2, value){
    $(id).on("click", function(event){
      $(id2).slideToggle(value);
    });
}

toggle('#q1_15', '#q1-0', 350);

Answer 3

你可以这样做：

$('[id^="q"]').on("click", function(e){
     //get the id of the clicked button
     var id = e.target.id;
     switch(id){
         //do all cases based on id
      }
});

如果有一些我们可以委托事件处理的元素，这可以以更清晰的方式完成，但是你没有向我们展示你的标记。这就像是

$('body').on("click",'[id^="q"]',  function(e){
     //get the id of the clicked button
     var id = e.target.id;
     switch(id){
         //do all cases based on id
      }
});

第二个选项只使用一个事件处理程序（好），但它必须等到事件被冒泡到DOM（可能是坏的）

Answer 4

为什么不创建一个javascript对象，其中keys表示接受点击的元素的id，对应的值是要显示的元素的id。类似的东西：

var clickHanders = {
    "q1_6": "q1-f",
    "q1_7": "q1-m"
    // ...
};

然后您只需要：

$(document).ready(function() {
    $("div[id^=q]").on("click", function(event) {
        var srcId = this.id;
        var dstId = clickHanders[srcId];
        if (dstId) {
            $("#" + dstId).slideToggle(350);
        }
    });
});

修改

我现在看到滑动持续时间也可能不同。您仍然可以使用上述方法：

var clickHanders = {
    "q1_6": {
        "elementId": "q1-f",
        "duration": "350"
    },
    "q2_7": {
        "elementId": "q2-m",
        "duration": "250"
    }
    //...
};
$(document).ready(function() {
    $("div[id^=q]").on("click", function(event) {
        var srcId = this.id;
        var dstData = clickHanders[srcId];
        if (dstData) {
            $("#" + dstData.elementId).slideToggle(dstData.duration);
        }
    });
});

此代码看起来比原始代码长，但可能更合理。

Answer 5

重构时有一些事要问：

你有速度问题吗？
你有记忆问题吗？
代码看起来难看吗？

你不应该重构代码只是为了重构它并优化不需要它的东西。如果代码不是太慢并且没有太高的内存消耗（全部在旁观者的眼中）并且可读，那么你就拥有了很好的代码。

我的想法是序列化事件触发器，事件目标和slideToggle数量，这样你就可以迭代某种Collection并绑定它。但那值得吗？

Answer 6

好吧，每个处理程序都做同样的事情，所以这就是你应该做的事情：

重构您的HTML，例如：

<div id="q1-6" data-to="q1-f"></div>

每个对象

（您可以使用其他HTML属性）。然后你可以定义处理程序：

$('#q1-6,#q1-7,#someother_id,#watman,#foo').click(function() {
   var id = $(this).attr('data-to');
   $('#'+id).slideToggle(350);
});

Answer 7

没有办法缩短你的代码，因为没有完全相同的东西，所以你的代码还可以。

如何重构这个简单的代码

7 个答案:

修改