Don’t Repeat Yourself
Non-DRY
/*Let's store some default values in an array*/ var defaultSettings = {}; defaultSettings['carModel'] = 'Mercedes'; defaultSettings['carYear'] = 2010; defaultSettings['carMiles'] = 5000; defaultSettings['carTint'] = 'Metallic Blue'; /*Let's do something with this data if a checkbox is clicked*/ $('.someCheckbox').click(function(){ if (this.checked){ $('#input_carModel').val(activeSettings.carModel); $('#input_carYear').val(activeSettings.carYear); $('#input_carMiles').val(activeSettings.carMiles); $('#input_carTint').val(activeSettings.carTint); } else { $('#input_carModel').val(''); $('#input_carYear').val(''); $('#input_carMiles').val(''); $('#input_carTint').val(''); } });
DRY
$('.someCheckbox').click(function(){ var checked = this.checked, fields = ['carModel', 'carYear', 'carMiles', 'carTint']; /* What are we repeating? 1. input_ precedes each field name 2. accessing the same array for settings 3. repeating value resets What can we do? 1. programmatically generate the field names 2. access array by key 3. merge this call using terse coding (ie. if checked, set a value, otherwise don't) */ $.each(fields, function(i,key){ $('#input_' + key).val(checked ? defaultSettings[key] : ''); }); });
フォームの名前のつけ方などに制約ができますが。。。