将代码块组合成一个函数

Question

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

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

Answer 1

您可以像下面这样使用 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>

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

Answer 3

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

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

使用 toggle( expression ) 切换可见性。表达式检查复选框是否被选中（=显示）或不被选中（=隐藏）。

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

Answer 4

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

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

然后您可以使用切换来缩短 show/hide-Parts，它采用可选的布尔参数来指示是显示还是隐藏：

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

Answer 5

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

将代码块组合成一个函数

combine blocks of code to one function

javascript

jquery

dry