Javascript 将代码块组合到一个函数中

我怎样才能做一个函数来做这样的事情

$('#check_express').is(':checked') ? $('#form_express').show() : $('#form_express').hide();

$('#check_express').on('change', function(){
    $(this).is(':checked') ? $('#form_express').show() : 
    $('#form_express').hide();
});

$('#check_standard').is(':checked') ? $('#form_standard').show() : $('#form_standard').hide();

$('#check_standard').on('change', function(){
    $(this).is(':checked') ? $('#form_standard').show() : 
    $('#form_standard').hide();
});

您可以像下面这样使用：

$（'check#u express'）。在（'change'，function（）上{
$（'#form_express'）。toggle（）；
});

你好，世界。
您可以使用以下方法：


$（'check#u express'）。在（'change'，function（）上{
$（'#form_express'）。toggle（）；
});

你好，世界。
您可以将它们合并为：

$('#check_standard,#check_express').on('change', function() {
  var selectedId = this.id;
  var getName = selectedId.split('_');
  $(this).is(':checked') ? $('#form_' + getName[1]).show() :
    $('#form_' + getName[1]).hide();
});

您可能可以将它们合并为：

$('#check_standard,#check_express').on('change', function() {
  var selectedId = this.id;
  var getName = selectedId.split('_');
  $(this).is(':checked') ? $('#form_' + getName[1]).show() :
    $('#form_' + getName[1]).hide();
});

我会将一个函数绑定到两个选择器

在功能中，检查触发了哪个
id

通过使用
切换（表达式）
切换可见性。其中表达式检查复选框是否选中（=显示）或未选中（=隐藏）


$（'check#u express，#check_standard'）。在（'change'，function（）上{
if（this.id=='check_express'）{
$（'#form_express'）。切换（$（this）.is（':checked'）；
}
否则{
$（'#form_standard'）。切换（$（this）.is（':checked'）；
}    
});
form{display:none；}

快捷支票：

检查标准：

快递
格式标准
我会将一个函数绑定到两个选择器

在功能中，检查触发了哪个
id

通过使用
切换（表达式）
切换可见性。其中表达式检查复选框是否选中（=显示）或未选中（=隐藏）


$（'check#u express，#check_standard'）。在（'change'，function（）上{
if（this.id=='check_express'）{
$（'#form_express'）。切换（$（this）.is（':checked'）；
}
否则{
$（'#form_standard'）。切换（$（this）.is（':checked'）；
}    
});
form{display:none；}

快捷支票：

检查标准：

快递
格式标准
首先，您可以将代码提取到函数中

function bind_stuff(type) {
  $('#check_' + type).is(':checked') ? $('#form_' + type).show() : $('#form_' + type).hide();

  $('#check_' + type).on('change', function(){
      $(this).is(':checked') ? $('#form_' + type).show() : 
      $('#form_' + type).hide();
  });
}

bind_stuff('express');
bind_stuff('standard');

然后，您可以使用toggle缩短显示/隐藏零件，toggle采用可选的布尔参数，指示是显示还是隐藏：

function bind_stuff(type) {
  $('#form_' + type).toggle($('#check_' + type).is(':checked'));

  $('#check_' + type).on('change', function(){
      $('#form_' + type).toggle($(this).is(':checked'));
  });
}
bind_stuff('express');
bind_stuff('standard');

如果您想更进一步，可以通过假装更改事件来减少初始化部分：

function bind_stuff(type) {
  $('#check_' + type).on('change', function(){
      $('#form_' + type).toggle($(this).is(':checked'));
  });
  $('#check_' + type).trigger('change');
}

bind_stuff('express');
bind_stuff('standard');

首先，您可以将代码提取到函数中

function bind_stuff(type) {
  $('#check_' + type).is(':checked') ? $('#form_' + type).show() : $('#form_' + type).hide();

  $('#check_' + type).on('change', function(){
      $(this).is(':checked') ? $('#form_' + type).show() : 
      $('#form_' + type).hide();
  });
}

bind_stuff('express');
bind_stuff('standard');

然后，您可以使用toggle缩短显示/隐藏零件，toggle采用可选的布尔参数，指示是显示还是隐藏：

function bind_stuff(type) {
  $('#form_' + type).toggle($('#check_' + type).is(':checked'));

  $('#check_' + type).on('change', function(){
      $('#form_' + type).toggle($(this).is(':checked'));
  });
}
bind_stuff('express');
bind_stuff('standard');

如果您想更进一步，可以通过假装更改事件来减少初始化部分：

function bind_stuff(type) {
  $('#check_' + type).on('change', function(){
      $('#form_' + type).toggle($(this).is(':checked'));
  });
  $('#check_' + type).trigger('change');
}

bind_stuff('express');
bind_stuff('standard');

我建议使用复选框ID与表单的映射，一次完成：

var map = {
  check_express: $('#form_express'),
  check_standard: $('#form_standard')
};

$('#check_express, #check_standard').on('change', function() {
    map[this.id].toggle($(this).is(':checked')); 
});

如果您有更多这样的案例，只需将它们添加到
map
我建议使用复选框ID与表单的映射，一次完成：

var map = {
  check_express: $('#form_express'),
  check_standard: $('#form_standard')
};

$('#check_express, #check_standard').on('change', function() {
    map[this.id].toggle($(this).is(':checked')); 
});

如果你有更多这样的例子，只需将它们添加到
map
也添加你的
html
即可。我的html太大，它在ruby-on-Rail上。我的html太大，它在ruby-on-Rail上。一旦你将
type
传递给函数，你就不需要
on（'change'
）了。只有
$（“#form"+type）.toggle（$（this）.is（“：checked”）；
。在函数中包含函数和事件触发器会破坏整个目的。我想实现两件事：1）初始化表单的状态，2）之后保持它们的同步。如果确保表单的初始状态与复选框的状态同步，则不需要触发器。因为您正在将
type
传递给函数，所以实际上不需要
on（'change'
）。只有
$（'#form"+type）。toggle（$（this）。is（':checked'））；
。在函数中包含一个函数和一个事件触发器会破坏整个目的。我想实现两件事：1）初始化表单的状态，2）之后保持它们的同步。如果确保表单的初始状态与复选框的状态同步，则不需要触发器。