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

您可以将它们合并为：

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

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

中

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来缩短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 3

您可以使用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 4

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

在该功能中，检查触发了哪个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 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。

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

5 个答案: