将代码块组合成一个函数答案

【问题标题】：combine blocks of code to one function将代码块组合成一个函数
【发布时间】：2017-12-04 08:39:09
【问题描述】：

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

$('#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();
});

【问题讨论】：

也添加您的html。
我的 html 太大，它在 ruby on rails 上

标签： javascript jquery dry

【解决方案1】：

首先你可以将代码提取到一个函数中

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

然后您可以使用切换来缩短显示/隐藏部分，它采用一个可选的布尔参数来指示是显示还是隐藏：

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

【讨论】：

由于您将type 传递给函数，因此您实际上并不需要on('change' .. 只有$('#form_' + type).toggle($(this).is(':checked'));.. 在函数内部拥有一个函数和一个事件触发器会破坏整个目的。
我想要实现两件事：1) 初始化表单的状态，2) 之后让它们保持同步。如果确保表单的初始状态与复选框的状态同步，则不需要触发器。

【解决方案2】：

您可以将它们合并为：

$('#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();
});

【讨论】：

【解决方案3】：

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

在函数中，检查哪个id被触发了。

使用toggle( expression ) 切换可见性。 where 表达式检查复选框是否被选中 (=show) 或未选中 (=hide)。

$('#check_express,#check_standard').on('change', function(){
    if( this.id == 'check_express' ) {
        $('#form_express').toggle( $(this).is(':checked') );
    }
    else {
        $('#form_standard').toggle( $(this).is(':checked') );
    }    
});

form { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Check express: <input type="checkbox" id="check_express" /> <br />
Check standard: <input type="checkbox" id="check_standard" /> <br />

<form id="form_express">
  Form express
</form>
<form id="form_standard">
  Form standard
</form>

【讨论】：

【解决方案4】：

我建议您使用复选框 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。

【讨论】：

【解决方案5】：

您可以使用toggle，如下所示：

$('#check_express').on('change', function() {
  $('#form_express').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="check_express" />
<div id="form_express" style="display: none">
  Hello, world.
</div>

【讨论】：